/* CSS Document */
html{ height:100%;}
body{ background:#fff; height:100%; color:#221814; position:relative;}
h1,h2,h3,p{ line-height:1.2em;}
img{ max-width:100%; vertical-align:bottom;}
.contents{ width:960px; max-width:100%; background:#fff; margin:0 auto; padding-bottom:60px;}
.sp{ display:none;}

h1.title{ width:690px; margin:20px auto 5px; max-width:90%; text-align:center;}
h2.title{ width:690px; font-size:1.8em; line-height:1.4em; max-width:90%; margin:5px auto; text-align:left;}
p.text{ margin:0 auto; max-width:90%; font-size:1.2em; line-height:1.8em; text-align:left; letter-spacing:0.1em;}


/*スライダー*/
#top .swiper-container{ width:1190px; max-width:100%; position:relative; margin:0 auto;}
#top .swiper-slide{ animation-name: fadein; animation-duration: 2s;}
#top .swiper-container .slider_text1{ position:absolute; z-index:10; top:25%; left:27%; max-width:12%; animation-name: fadein; animation-duration: 3s;  animation-delay: 1s; animation-fill-mode: forwards; opacity:0;}
#top .swiper-container .slider_text2{ position:absolute; z-index:10; right:8%; bottom:5%; max-width:30%; animation-name: fadein; animation-duration:3s; animation-delay: 2s; animation-fill-mode: forwards; opacity:0;}
@keyframes fadein {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}


#sample .swiper-container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
#sample .swiper-slide {
	background-size: cover;
	background-position: center;
}
#sample .gallery-top {
	height: 570px;
	width: 961px;
}
#sample .gallery-thumbs {
	height: 20%;
	box-sizing: border-box;
	padding: 10px 0;
}
#sample .gallery-thumbs .swiper-slide {
	width: 25%;
	height: 100%;
	opacity: 0.4;
}
#sample .gallery-thumbs .swiper-slide-active {
	opacity: 1;
}
	

/*トグルボタン*/
#navi_toggle{ width:100%; display:none; background:rgba(255,255,255,0.9); padding:30px 0; position:relative; z-index:1;}
#navi_toggle ul{ width:200px; margin:0 15px 0 auto;}
#menubtn{
	width:40px;
	height:41px;
	display:none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
	border:1px solid #7d8488;
    border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */
	font-family:Arial, Helvetica, sans-serif;
	}
#menubtn #menubtn_line{
    width: 40px;
    height:40px;
    position: absolute;
    top: 0px;
    right: 0px;
	
}
#menubtn #menubtn_line span {
    display: block;
    background: #7d8488;
    width:   23px;
    height: 2px;
    position: absolute;
    left: 9px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menubtn p{color:#fff; position:absolute; bottom:3px; left:8px;}
#menubtn #menubtn_line span:first-child {
    top: 12px;
}
#menubtn #menubtn_line span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
}
#menubtn #menubtn_line span:last-child {
    bottom: 12px;
}
#menubtn.active #menubtn_line span:first-child {
    -webkit-transform: translateY(7px) rotate(45deg);
    -moz-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
#menubtn.active #menubtn_line span:nth-child(2) {
    opacity: 0;
}
#menubtn.active #menubtn_line span:last-child {
    -webkit-transform: translateY(-7px) rotate(-45deg);
    -moz-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}

	
/*ヘッダー*/
hader .nav ul li{ width:100px; border:5px solid #8f2237; display:inline-block; margin-right:10px;}
hader{ width:1190px; max-width:100%; margin:0 auto;}
.header_top{ width:1100px; max-width:100%; position:relative; text-align:left; margin:15px auto 10px;}
header ul.contact_btn{ position:absolute;  right:20px; bottom:0;}
header ul.contact_btn li{ display:inline-block;}
header ul.nav{ width:1010px; max-width:98%; margin:40px auto; display:flex; justify-content: right;  flex-wrap: wrap; }
header ul.nav li{margin-right:4px;}

/*フッター*/

#footer_wrap{ background:url(../images/footer_bg.png) repeat-x bottom; width:100%; padding-bottom:30px;}
footer{ width:960px; max-width:90%; text-align:left; margin:0 auto; display:flex; justify-content: left;  flex-wrap: wrap; }
footer h2{ font-size:1.1em; padding:0 0 3px 15px;}
footer .left_box h1{ padding:25px 0;}
footer .left_box{ width:300px;}
footer .left_box .ability_banner{ margin-top:100px;}
footer .left_box .ability_banner img{
border-radius: 3px;        /* CSS3草案 */  
    -webkit-border-radius: 3px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 3px;   /* Firefox用 */
}
footer .left_box p{ padding:0 0 0 15px; font-size:0.9em; line-height:1.4em;}
footer .right_box{}
footer .right_box ul{ padding:55px 0 20px;}
footer .right_box ul li{ font-size:1.2em; line-height:1.4em; padding-bottom:15px;}
footer p.copy{ text-align:right; width:100%;}
footer ul.sns li{ display:inline-block; margin-right:15px;}
footer ul.sns{ padding:20px 0;}



/*各ぺーじ*/
#top h1.news_title{ max-width:95%; margin:60px auto 5px; font-size:2em; line-height:1.4em; text-align:left;}
#top .news{ max-width:85%; margin:0 auto; padding:20px 25px; border:1px solid #717071; }
#top .news dl{ font-size:1.2em; line-height:1.4em; text-align:left; height:200px; overflow:auto; padding:10px;}
#top .news dl dt{ width:75px; float:left; padding-bottom:10px;}
#top .news dl dd{ margin-left:95px; padding-bottom:10px;}
#top .image1{ margin-top:40px;}
#top ul.sns li{ display:inline-block; margin-right:10px; margin-top:10px;}
#top p.text{width:520px; height:350px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin:0 auto; text-orientation: upright; }
#top h1.title{ margin:60px auto 30px;}

.tate{width:500px; height:350px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin:0 auto; text-orientation: upright; display: flex; align-items:right; flex-wrap: wrap; justify-content:center;}


#about{ position:relative; padding-bottom:200px;}
#about p.text{ width:650px; height:400px;  position:relative; z-index:1; line-height:2.2em; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin:20px auto; text-orientation: upright;}
#about img.image{ position:absolute; right:0; bottom:100px; z-index:0;}

#special { width:500px; max-width:90%;}
#special h2{ font-size:1.7em; line-height:1.4em; text-align:left; margin:15px auto;}
#special p.text{ max-width:100%; line-height:2.2em;}
#special p.add{ text-align:left; font-size:1em; line-height:1.8em; clear:both; margin-bottom:10px;}
#special ul.image { width:155px; float:right; margin-left:30px;}
#special ul.image li{ margin-bottom:20px;}

#make p{ margin:10px auto;}
#make .tate p{ margin:20px;}
#make .pink{ color:#a5286d;}
#make img.image1{ margin:30px 10px 30px 0;}
#make img.image2{ margin:30px 0 30px 0;}
#make .contact_btn{ margin:30px auto;}
#make p span{ font-size:0.8em;}
#make p span:before{ content:"■"; color:#a5286d; font-size:1.4em;}


#dear{ }
#dear .dear_list{ width:750px; max-width:95%; margin:0 auto; padding:30px 0; text-align:left; position:relative;}
#dear h2{ text-align:center; font-size:1.3em; line-height:1.2em; background:#d7c9c8; width:115px; padding:30px 10px; float:left; margin:10px 0 0 90px;}
#dear h2.title1{ height:65px; padding:60px 10px;}
#dear h2.title2{ padding:20px 10px;}
#dear dl{ overflow:hidden; margin:10px 0 10px 245px; font-size:1.1em; position:relative;}
#dear dl dt{ width:145px; float:left; padding:0 0 10px 0;}
#dear dl dd{ margin-left:155px; padding:0 0 10px 0;}
#dear img.ume1{ position:absolute; top:0; right:80px;}
#dear img.ume2,#dear img.ume4,#dear img.ume5{ display:block; clear:both;}
#dear img.ume3{ position:absolute; right:0; top:0;}
#dear img.ume6{ position:absolute; right:135px; top:-40px;}
#dear p.text{ height:350px; background:url(../images/dear_image1.png) no-repeat 20px top; width:500px; max-width:90%; margin:0 auto; position:relative; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin:20px auto; text-orientation: upright; display:flex; align-items:center; padding:30px 0 0 30px;}

#greeting .wrap{ max-width:70%; padding:30px 30% 0 0; position:relative;}
#greeting p{ margin:0 0 0 103px; position:relative; line-height:2.4em; z-index:2;}
#greeting p span{ font-size:1.6em; font-weight:normal; vertical-align:bottom;}
#greeting .wrap img.image1{ max-width:70%; position:absolute; top:-30px; right:0; z-index:1;}
#greeting .wrap img.image2{ max-width:30%; position:absolute; top:0; right:0; z-index:0;}

#gift p{ max-width:95%; margin:0 auto; font-size:1.5em; line-height:1.4em;}
#gift p.main_text{ font-size:1.7em; color:#5f783e; margin-top:40px;}
#gift h2{ margin:60px auto 20px;}
#gift ul{ width:160px; margin:0 auto 15px;}
#gift ul li{ font-size:1.5em; line-height:1.2em; padding:5px 0; text-align:left;}
#gift ul li:before{ content:"●"; padding-right:5px; color:#86a55a;}

#event { width:690px; padding-left:60px; margin:0 auto; max-width:90%;}
#event h2{ text-align:left; margin:50px 0 15px 0;}
#event p{ font-size:1.3em; line-height:1.8em; text-align:left;}
#event p span{ font-size:0.85em;}
#event h3{ font-size:1.7em; line-height:1.2em; text-align:left; padding:20px 0 0 120px; position:relative; border-bottom:1px solid #4e4b4b; vertical-align:bottom;}
#event h3 img{ position:absolute; left:0; bottom:-1px; vertical-align:bottom;}
#event .sec1 p.add{ padding:10px 0;}
#event .sec1 h3{ font-size:1.4em;}
#event .sec1 .wrap{ margin-left:115px;}
#event .sec1 dl dt,#event .sec1 dl dd{ font-size:1.3em; line-height:1.4em; padding:3px; }
#event .sec1 dl dt{ width:80px; border:1px solid #000;float:left; margin-bottom:10px;}
#event .sec1 dl dd{ margin:0 0 10px 100px; text-align:left; padding:4px 5px;}
#event .sec3{ text-align:left;}
#event .sec3 p img{ position:absolute; right:0; top:30px;}
#event .sec3 p { position:relative; padding:0 170px 20px 0;}
#event p.kome{ margin:10px 0;}
#event p.kome:before{  content:"◆"; padding-right:5px; color:#902668;}


#school .tate{ height:250px; margin-bottom:80px; margin-top:50px;}
#school .school_contact_btn{ display:block; margin:40px auto; width:240px; font-size:1.2em; font-weight:bold; padding:10px 15px; border:2px solid #009933;}
#school h2.title{ margin:100px auto 50px; font-size:2em;}
#school p.text2{ font-size:1.4em; line-height:2em; width:690px;  max-width:90%; margin:0px auto 60px; padding:10px 0; text-align:left;}


#contact h2,#contact p{ font-size:1.2em; line-height:1.4em; text-align:left; width:540px; max-width:90%; margin:5px auto;}
#contact .tel{ margin:60px auto; padding-left:190px;}
#contact form#mailformpro dl{
	width:570px;
	max-width:90%;
	margin:30px auto;
	font-size:1.3em;
	line-height:1.4em;
}
#contact form#mailformpro dl dt {
	float: left;
	width: 165px;
	clear: both;
	padding: 10px 0px;
	text-align: left;
	margin: 0px;
	line-height:20px;
}
#contact form#mailformpro dl dt.nomust{width: 95px; padding-left:40px;}

#contact form#mailformpro dl dd {
	margin: 0px;
	padding: 10px 5px 10px 170px;
	line-height: 1.5em;
	text-align: left;
}
#contact form#mailformpro dl dd p{ font-size:0.8em;}
#contact form#mailformpro input{ width:370px; max-width:100%; border:1px solid #221814;}
#contact form#mailformpro dl dd.name input{ width:180px; max-width:48%;}
#contact form#mailformpro .check li{ display:inline-block;}
#contact form#mailformpro .check input{ width:auto; max-width:auto; margin:0 8px 0 0; vertical-align:bottom; border:none;}
#contact form#mailformpro .check label{ width:180px; display:block; border:1px solid #221814; padding:7px 5px; margin-bottom:3px;}
#contact form#mailformpro div.buttons button{ width:140px; padding:5px; border:none; text-align:center; background:#86a55a; color:#fff; font-size:1.4em; line-height:1.4em;    border-radius: 3px;        /* CSS3草案 */  
    -webkit-border-radius: 3px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 3px;   /* Firefox用 */
}
#contact form#mailformpro textarea{width:370px; max-width:90%; min-width:370px; min-height:100px; border:1px solid #221814;}
#contact form#mailformpro .must {
	display: block;
	background-color: #86a55a;
	padding: 1px 5px;
	line-height:20px;
	font-size: 1em;
	color: #FFF;
	float: left;
	margin: 0px 5px;
    border-radius: 2px;        /* CSS3草案 */  
    -webkit-border-radius: 2px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 2px;   /* Firefox用 */
}

#thanks p{ margin:0 auto; text-align:left; width:560px; max-width:90%; font-size:1.4em; line-height:1.8em; padding:10px 0;}

/*グーぐるマップ*/
.gmap {
position: relative;
padding-bottom: 60%;
height: 0;
overflow: hidden;
width:490px;
max-width:100%;
margin-bottom:40px;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/*1020以下 */
@media screen and (max-width: 1020px){
header ul.nav li{ max-width:10.2%; margin-right:0.3%;}

}


/*960以下
 */
@media screen and (max-width: 960px){
#about p.text{ margin:0 auto;}
#about p.text img{ position:relative; right:auto; bottom:auto;}
#make img.image1,#make img.image2{ margin:10px 0px 10px 0;}
#greeting p{ margin:0 auto;}
#event {padding-left:0px;}

header ul.contact_btn{ right:60px;}
#menubtn{ display:block;}
header ul.nav { display:none;}
header ul.nav li.header_logo{ display:block;}
}


/*800以下
 */
@media screen and (max-width: 800px){

#dear h2{  margin:10px 0 0 0;}
#dear dl{ overflow:hidden; margin:10px 0 10px 145px; font-size:1.1em; position:relative;}
#dear p.text{ background:url(../images/dear_image1.png) no-repeat 5px 5px; padding:5%; }
#dear img.ume6{ right:60px; top:-80px;} 
#greeting .wrap{ max-width:70%; padding:15px 30% 0 0; position:relative;}

#top p.text,.tate,#about p.text,#dear p.text{ max-width:90%; margin:30px auto; height:auto; -ms-writing-mode: lr-tb; writing-mode:horizontal-tb;}

}





/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
img.sp{ display:block;}
img.pc{ display:none;}
br.none{ display:none;}
#top .news{ padding:10px 3%;  }
#top h1.news_title{ margin:40px auto 5px; font-size:1.6em;}

#about img.image{ bottom:0px;}
footer ul.sns{ padding:0 0 0 0px; margin-top:0px;}
header ul.contact_btn{ position:relative; margin:10px 0 0 30px; right:0px;}
header ul.contact_btn li{ padding-top:7px;}

#dear h2{ width:150px; padding:10px 10px; float:none; margin:10px 0 0 0; text-align:left;}
#dear h2 br{ display:none;}
#dear h2.title1{ height:auto;  padding:10px 10px; line-height:30px;}
#dear h2.title2{ width:120px; padding:10px 0 10px 40px;}
#dear h2.title3{ line-height:25px;}
#dear dl{ margin:10px 0 10px 20px;}

#greeting .wrap{ max-width:100%; padding:10px 0 0 0; position:relative;}
#greeting .wrap img.image2{ max-width:40%; position:relative; float:right;}
#greeting .wrap img.image1{ display:none;}
#event .sec1 .wrap{ margin-left:0;}
#event .sec3 p img{ position:relative; float:right; right:auto; top:auto;}
#event .sec3 p { padding-right:0px;}

#contact form#mailformpro .check li{ display:block;}


}
/*660以下 */
@media screen and (max-width: 660px){

}
/*560以下 */
@media screen and (max-width: 560px){
header ul.nav li{ max-width:30%; margin-right:1%;}
#top .news dl{height:150px;}
#top .news dl dt{ width:100%; float:none; padding-bottom:5px;}
#top .news dl dd{ margin-left:0;}
#top .image1{ margin-top:20px;}

#about { padding-bottom:20px;}
#about img.image{ position:relative;}

#special ul.image { width:100%; float:none; margin-left:0; text-align:left;}
#special ul.image li{ display:inline-block; width:30%; margin-right:2%; margin-bottom:10px;}
#special p.text{ line-height:1.6em;}
#dear img.ume3{ display:none;}
#dear p.text{ background:none;}

#greeting p{ line-height:1.8em;}
#event .sec3 p img{ width:120px;}


#contact form#mailformpro dl dt {
	max-width:100%;
	float: none;
	width: auto;
	padding: 5px 0;
	text-align: left;
line-height:20px;
}
#contact form#mailformpro dl dt.nomust{width:135px; padding-left:0;}
#contact form#mailformpro dl dt.nomust br{ display:none;}
#contact form#mailformpro dl dd {
	clear: both;
	max-width:100%;
	border-top: none;
	padding: 5px 0;
	line-height: 1.5em;
}

#contact .tel{ margin:30px auto; padding-left:10px; text-align:left;}


}



/*414以下 iphone縦*/
@media screen and (max-width: 414px){
footer .left_box{ width:200px; float:none;}
footer .right_box{ margin-left:15px;}
footer .right_box ul{ padding:25px 0 0px;}
footer .right_box ul li{ padding-bottom:10px;}
footer .left_box .ability_banner{ margin-top:10px;}


#dear dl dt{ width:auto; float:none; padding:0 0 5px 0;}
#dear dl dt:before{ content:"■"; font-size:1.6em; padding-right:3px;}
#dear dl dd{ margin-left:0; padding:0 0 10px 0;}
#dear img.ume6{ width:60px;}
#greeting .wrap{ text-align:right;}
#greeting .wrap img.image2{ max-width:70%; float:none; margin-right:20px;}


#event .sec1 dl dt{ float:none; margin-bottom:5px;}
#event .sec1 dl dd{ margin:0 0 10px 0px;}

}