/***************************************************
PC
***************************************************/

@media screen and (min-width: 640px) {
/* 640px 以上 */
.pc {display: block;}
.sp {display: none;}
 
html,body { line-height: 1.7; }

div#header {padding: 2rem 0;}
.main_img {}
h1{text-align: center; font-size: 140%; letter-spacing: 0.3em; line-height: 1.7; margin: 2% 0;}

.btn { max-width: 960px; margin: 0 auto;}
.btn ul {display: flex; justify-content: space-between; flex-flow: wrap; margin: 0 4% 8%;}
.btn ul li {width: 48%; margin-bottom: 20px; }
.btn ul li.otameshi a { display: block; background: #b9002e; border-radius: 6px; padding: 4%; text-align: center;text-decoration: none; color: #fff; font-size: 140%;}
.btn ul li.seminar a { display: block; background: #666; border-radius: 6px; padding: 4%; text-align: center;text-decoration: none; color: #fff; font-size: 140%;}
.btn ul li a:hover {opacity: 0.7;}

  h2.ttl {letter-spacing: 0.1em; text-align: left; font-size:180%; }
  h3.ttl { margin-bottom: 1.5rem;}

.Introduction {width: 200px; margin: 0 auto; font-size: 200%; color: #fff; text-align: center; padding: 1% 5%; background: #0091e2; border-radius: 50px;}

p.explanation { max-width: 660px; margin: 2% auto; font-size: 18px; }
p.explanation span {font-size: 80%; display: block;}

div.seminar { max-width: 40%; margin: 2% auto 2%;}
div.seminar a { display: block; background: #666; border-radius: 6px; padding: 4%; text-align: center;text-decoration: none; color: #fff; font-size: 140%;}

div.movie { margin-bottom: 60px;}

#container { padding-top: 120px;}
#contents {
    padding-bottom: 80px;
    width: 100%;
    overflow: hidden;
}
#contents > section { position: relative; margin-top: 100px; }

#contents > section::before {
	content: "";
	position: absolute;
	bottom: 0;
	width: calc(1000px + (100% - 1000px) / 2);
	height: 200px;
	display: block;
	background-color: #434343;
}

#contents .wrapper {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
  margin: 0 6%;
}

#contents .photo { position: relative; overflow: hidden; }
#contents > section.photo { box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.4); }

#contents .photo::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}
#contents .photo img { width: 100%;}
#contents .detail .text {font-size: 18px;}
#contents .detail .more {
	position: relative;
	margin-top: 25px;
  margin-bottom: 20px;
  padding-right: 20px;
	width: 300px;
	height: 60px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

#contents .detail .more a {
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
  padding: 0 48px 0 28px;
	align-items: center;
	color: #000;
	font-size: 22px;
	line-height: 1em;
	letter-spacing: 0.05em;
  text-decoration: none;
  transition: 0.3s;
  background-color: #a0a0a0;
}

#contents .detail .more a::before {
	content: "";
	position: absolute;
	bottom: 27px;
	right: 0;
	width: 60px;
	height: 2px;
	display: block;
	background-color: #000;
}

#contents .detail .more a::after {
	content: "";
	position: absolute;
	bottom: 27px;
	right: 0;
	width: 14px;
	height: 2px;
	display: block;
	background-color: #000;
  transform: rotate(30deg);
	transform-origin: right bottom;
	transition: right 0.3s cubic-bezier(0.5, 1, 0.89, 1);
}
#contents .detail .more a:hover {opacity: 0.7; }
#contents .detail .more span {border:2px solid #333; border-radius: 6px; padding:2px 8px; margin-left: 8px;}

#contents .detail .more2 {
	position: relative;
	margin-top: 25px;
  margin-bottom: 20px;
  padding-right: 20px;
	width: 500px;
	height: 60px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

#contents .detail .more2 a {
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
  padding: 0 48px 0 28px;
	align-items: center;
	color: #000;
	font-size: 18px;
	line-height: 1em;
	letter-spacing: 0.05em;
  text-decoration: none;
  transition: 0.3s;
  background-color: #a0a0a0;
}

#contents .detail .more2 a::before {
	content: "";
	position: absolute;
	bottom: 27px;
	right: 0;
	width: 60px;
	height: 2px;
	display: block;
	background-color: #000;
}

#contents .detail .more2 a::after {
	content: "";
	position: absolute;
	bottom: 27px;
	right: 0;
	width: 14px;
	height: 2px;
	display: block;
	background-color: #000;
  transform: rotate(30deg);
	transform-origin: right bottom;
	transition: right 0.3s cubic-bezier(0.5, 1, 0.89, 1);
}
#contents .detail .more2 a:hover {opacity: 0.7; }
#contents .detail .more2 span {border:2px solid #333; border-radius: 6px; padding:2px 8px; margin-left: 8px;}
  
.movie_contents {max-width: 1200px; margin: 0 auto; padding: 20px;}

/* Left
-------------------------------------------------- */
#Left .photo {	width: 75%;	max-width: 530px; margin-bottom: 16px;}
#Left .detail {	padding: 0 3% 0 5%;	width: 61.2%; margin-top: auto;}
#Left .detail h5 {
	margin-top: 20px;
	font-size: 4rem;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-style: italic;
  line-height: 1;
  margin-bottom: 20px;
}

/* Right
-------------------------------------------------- */
#Right::before { right: 0; opacity: 1;}
#Right .photo {	width: 65%;	max-width: 530px; order: 2; margin-bottom: 16px;}
#Right .detail {
	padding: 0 5% 0 3%;
	width: 61.2%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
  margin-top: auto;
	order: 1;
}
#Right .detail h5 {
	margin-top: 20px;
	font-size: 4rem;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-style: italic;
  line-height: 1;
  margin-bottom: 20px;
}

/* トップページへボタン
-------------------- */
.pagetop { bottom: 24px; right: 24px;}

/* モーダル
-------------------------------------------------- */
#modal_box .modal_box{ padding: 4%; margin: 0; }
#modal_box .modal { 
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #FFF;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    transition: margin-top 0.3s ease, height 0.3s ease;
    width:50%;
    height: 22em;
    border-radius:10px; /* CSS3 */
    -webkit-border-radius:10px; /* Safari,Google Chrome */
    -moz-border-radius:10px;/* Firefox */
    display:none; 
    z-index:9999; 
    text-align:center; 
}
#modal_box .modal_tit {
    padding: 3%;
    font-weight: bold;
    font-size: 120%;
    color: #FFF;
    background: #999;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#modal_box .come { padding: 3%;text-align: left; color:#333;}
#modal_box ul.modal_btn { margin: 20px auto 0; width: 80%; padding: 0; box-sizing: border-box;}
#modal_box ul.modal_btn li { float: left; width: 49%; list-style: none;}
#modal_box ul.modal_btn li+li { margin-left: 2%;}
#modal_box ul.modal_btn li a {
    display: block;
    width: 100%;
    padding: 15px;
    color: #FFF;
    font-size: 120%;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    
}
#modal_box ul.modal_btn li:nth-child(1) a { background: #4DA5DE;}
#modal_box ul.modal_btn li:nth-child(2) a { background: #999;}
#modal_box ul.modal_btn li a:hover { opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7;}
 
 
/* width
-------------------- */
.wdp10 {width: 10%;} .wdp20 {width: 20%;} .wdp30 {width: 30%;} .wdp40 {width: 40%;} .wdp50 {width: 50%;} .wdp60 {width: 60%;} .wdp70 {width: 70%;} .wdp80 {width: 80%;} .wdp90 {width: 90%;}

/* margin-bottom
-------------------- */
.mg0a {margin: 0 auto;} .mgb20 {margin-bottom: 2rem!important;} .mgb40 {margin-bottom: 4rem!important;} .mgb50 {margin-bottom: 5rem!important;} .mgb60 {margin-bottom: 6rem!important;} .mgb70 {margin-bottom: 7rem!important;} .mgb80 {margin-bottom: 8rem!important;} .mgb90 {margin-bottom: 9rem!important;}

}