@charset "utf-8";

body{background:#63AD7F;
font-family: 'Noto Serif JP', serif; color: #333333;
font-size:1rem; line-height:1.85;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%; 
word-wrap: break-word;
}

body.appear{background:#ffffff;}
*{box-sizing: border-box;}
#container{overflow-x: hidden;}

/* header ************************************************/
/*=5-1-9 ==========================================================*/
#header{
position: fixed; width:100%; height: 94px; z-index: 99; display: flex; justify-content: space-between; align-items: center;
border-bottom:solid 1px #28a452; background:url("../img/header-bkg.jpg") no-repeat bottom center; background-size: cover;
}
#header.UpMove{animation: UpAnime 0.5s forwards;}
@keyframes UpAnime{
    from {opacity: 1; transform: translateY(0);}
    to {opacity: 0; transform: translateY(-100px);}
}
#header.DownMove{animation: DownAnime 0.5s forwards;}
@keyframes DownAnime{
    from {opacity: 0; transform: translateY(-100px);}
    to {opacity: 1; transform: translateY(0);}
}

#header ul#utility-navi{position: fixed; top:0; right:0; z-index: 999; display: flex; font-size: 0.8rem;}
#header ul#utility-navi li{text-align: center; margin:0 1px;}
#header ul#utility-navi li span{display: block;}
#header ul#utility-navi li a{color: #484749; padding: 15px 0; display: block; width:100px; transition: all .5s;}
#header ul#utility-navi li img{width:35%;}
#header ul#utility-navi li:first-child a{background:#ffffff; color:#26a352;}
#header ul#utility-navi li:first-child a:hover{background:#dddddd;}
#header ul#utility-navi li:last-child a{background:#ffffff; color:#971D45;}
#header ul#utility-navi li:last-child a:hover{background:#dddddd;}
#g-nav ul{display: flex; padding: 0 0 0 5%;}
#g-nav ul li{letter-spacing: 0.1em; white-space: nowrap;}
#g-nav ul li:last-child{/*display: none;*/}
#g-nav ul li a{display: block; font-size: 1.1em; padding:5px 15px; line-height:1.5; text-align: center;}
#g-nav ul li a span{font-size: 0.7em;}
#g-nav ul li a:link {text-decoration: none; color:#ffffff;}
#g-nav ul li a:visited {text-decoration: none; color:#ffffff;}
#g-nav ul li a:hover {text-decoration: none; color: #00913A;}
#g-nav ul li a:active {text-decoration: none; color: #00913A;}

/* lead ***************************************/
#lead{position: relative; padding: 80px 0 0; height:100vh;}
#lead:after{content: ""; display: block; clear: both}
#slider-area{width:100%; height: 80vh; position: relative; top: 0; left:0; z-index: -1;}
#slider-area #slider{width:100%; height:80vh;}
#lead h2.heading{position: absolute; /*top: 0;*/ text-align: center;
bottom:  40px;                 /* 下からの位置指定 */
left:  0;                   /* 左からの位置指定 */
right:  0;                  /* 右からの位置指定 */
margin:  auto;              /* 位置調整と組み合わせて上下中央に */
animation-delay: 0.2s;}
#lead h2.heading img {max-width: 80%; height: auto;}
#lead p.lead{position: absolute; top:520px; right:4%; font-size: 1.2em; color: #00913A; letter-spacing: 0.2em; line-height: 1.8; white-space: nowrap; animation-delay: 0.7s;}

/* history-000***************************************/
#history-000{position: relative; padding:10px 20px; margin: 0 auto 0; text-align:center;}
#history-000 h2{font-size:1.3em; font-weight: normal; color: #00913A; margin: 22px auto;}
#history-000 h2 span{font-size:1.8em; font-weight: normal; color: #00913A;}
#history-000 h2 br{display: none;}
#history-000 p{margin: 0 auto 38px; letter-spacing: 0.2em; line-height: 1.8; animation-delay: 0.3s;}

/* news **************************************************/
#news{margin: 0 auto; padding:33px 8px; color: #222222;
border-bottom: 1px dashed #28a452;
}
#news p{margin: 0 auto 8px;}
#news .eria-left {float: left; width: 48%; margin:0 auto; padding:0 1%; border-right: 1px solid #cccccc;}
#news .eria-right {float: right; width: 48%; margin:0 auto; padding:0 1%;}

/* history-002***************************************/
#history-002{position: relative; padding:70px 70px; margin: 0 auto 0; /*background:#f7f8e4;*/}
#history-002 h2{font-size: 2em; font-weight: normal; color: #484749; letter-spacing: 0.1em; text-align:center;}
.history-002-area{display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row-reverse;}
.history-002-img{/*background:url("../img/history-001-img001.jpg") no-repeat center; background-size: cover; height: auto; */width:50%;}
.history-002-content{width:50%; padding: 1% 2%;}
.history-002-content p{margin: 0 auto 38px; letter-spacing: 0.2em; line-height: 1.8;}

/* topics ********************************************/
#topics{position: relative; padding:70px 0 80px; margin: 100px auto 0;/*margin: 100px auto; padding:30px 0 220px;*/ background:#f7f8e4;}
#topics h2{font-size: 2em; font-weight: normal; color: #484749; letter-spacing: 0.1em; text-align:center;}
.topics-area{display: flex; justify-content: space-around; flex-wrap: wrap; margin: 2% auto;}
.topics-area article{width:23%; box-shadow: 0 0 10px #cccccc; background:#ffffff; border-radius: 8px;}
.topics-area article:nth-of-type(1){position: relative; top:130px;}
.topics-area article:nth-of-type(2){position: relative; top:80px;}
.topics-area article:nth-of-type(3){position: relative; top:30px;}
.topics-area article:nth-of-type(4){position: relative; top:0px;}
.zoomOut .mask{border-radius: 0 0 10px 10px;}
.topics-area .topics-block{padding:10px 20px;}
.topics-area .topics-block h3{font-size: 1.5em; color: #28a452; line-height:1.8;}
.topics-area .topics-block h3 span{font-size: 0.7em; color: #484749; margin: auto 8px;}


/* service ***************************************/
#service{position: relative; text-align: center; padding: 100px 0 0 0; margin: 100px auto 0;}
#service header{/*height: 30vh;*/ width:88%; padding: 50px 0 100px 0; z-index: 1; text-align:center;
background:url("../img/service-header_img.jpg") no-repeat center; background-size: cover;}
#service header h2{font-size: 2em; font-weight: normal; color: #ffffff; letter-spacing: 0.1em;}
#service .service-area{background:#f7f8e4; padding: 28px; width:80%; position: relative; top:-50px; left: 0%; z-index: 2;}
#service .service-area ul{display: flex; flex-wrap: wrap; justify-content:space-around;
/* スマホ表示用。flipDownを指定している親要素に指定しないとうまく動かない*/
transform:  translate3d(0, 0, 0);}
#service .service-area ul li{opacity: 0; width:23%; padding: 0; font-size: 1em; line-height:1.2;}
#service .service-area ul li span{display: block; width:100%; padding: 0;}
#service .service-area ul li span.img{display: block; width:auto; padding: 0;}
#service .service-area ul li a{display: block;}

/* history-001***************************************/
#history-001{position: relative; padding:70px 70px; margin: 0 auto 0; /*background:#cde3ce;*/}
#history-001 h2{font-size:2em; font-weight: normal; color: #13948f; letter-spacing: 0.1em; text-align:center;}
.history-001-area{ text-align:center;}
.history-001-content{width:80%; margin: 0 auto 0; padding: 0 2%;}
.history-001-content p{margin: 0 auto 38px; letter-spacing: 0.2em; line-height: 1.8;}



/* groupsalon ******************************************/
#groupsalon{margin: 0 auto; padding: 4% 10%; background:#ededec; color: #222222; border-top:solid 1px #cccccc;}
#groupsalon h2{font-size: 2em; font-weight: normal; color: #484749; letter-spacing: 0.1em; text-align:center;}
.groupsalon-area{width:100%;}
.groupsalon-area ul{display: flex; flex-wrap: wrap; justify-content:space-around;}
.groupsalon-area ul li{width:32%; margin: 0.5%; padding: 10px; text-align: center;}
.groupsalon-area ul li span{display: block; padding: 0;}
.groupsalon-area ul li a{display: block;}
.groupsalon-area ul li:nth-of-type(1){/*animation-delay: 0.5s;*/}
.groupsalon-area ul li:nth-of-type(2){animation-delay: 0.2s;}
.groupsalon-area ul li:nth-of-type(3){animation-delay: 0.4s;}


/* footer ************************************/
#footer{position: relative; display: flex; justify-content: space-between; flex-wrap:wrap; flex-direction: row-reverse; background-color:#f7f8e4;}
#footer #page-top{position: absolute; bottom:0; right: 0; width:80px; height:80px; background:#de3d27; display: flex; justify-content: center; align-items: center; cursor: pointer;}
#footer #page-top span{display: inline-block; width: 15px; height: 15px; border-top:2px solid #ffffff; border-left: 2px solid #ffffff; transform: rotate(45deg);}
/*==========================================
 id footer
===========================================*/
#footermenu {width: 100vw; margin:0 auto 0; padding: 88px 33px; background-color:#91cdaa; color: #000000;}
#footermenu a:link,
#footermenu a:visited {color: #000000; text-decoration: none;}
#footermenu a:hover,
#footermenu a:active {color: #ffffff; text-decoration: none;}
.content_nav {overflow: hidden; float: left; font-size:0.88em;}
.content_nav ul{margin: 0; padding: 0; list-style: none}
.content_nav li {float: left; margin: 0 8px; padding: 0;}
.content_nav li a:before {color:#006934; margin:0 4px; font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f105";}
.content_nav li.none {display: none;}
.company_nav {overflow: hidden; float: left; font-size:0.8em;}
.company_nav ul{margin: 0; padding: 0; list-style: none}
.company_nav li {float: left; margin: 0 8px; padding: 0;}
.company_nav li a:before {color:#006934; margin:0 4px; font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f105";}
.company_nav li.none {display: none;}
#footermenu address {overflow: hidden; font-size: 0.7em; float: right;}
#footermenu hr {overflow: hidden; width: 100%; border:1px solid #ffffff; margin: 20px 0;}


/*==========================================
 footer_fixedarea PCc Tbios off
===========================================*/
/*= footer_fixedarea PC Tbios off =========================*/
#footer_fixedarea {position: fixed; bottom: 0; display: flex; flex-wrap: wrap; justify-content:space-around; 
width: 100vw; z-index: 1000; margin:0 auto; padding:0; text-align: center; background-color: #28a452; color: #ffffff;
border-top:1px solid #ffffff; vertical-align:baseline; letter-spacing: 0.01em;}
/* column3-ovlight 3カラム shadow none------------------------------------------------------------*/
#footer_fixedarea .eria {float: left; margin:0 auto 0; padding:8px;}
#footer_fixedarea .eria:nth-of-type(1){width:15%;
background: rgb(255,221,131);
background: -moz-linear-gradient(45deg, rgba(255,221,131,1) 0%, rgba(242,105,57,1) 25%, rgba(207,46,146,1) 50%, rgba(76,100,211,1) 75%);
background: -webkit-linear-gradient(45deg, rgba(255,221,131,1) 0%, rgba(242,105,57,1) 25%, rgba(207,46,146,1) 50%, rgba(76,100,211,1) 75%);
background: linear-gradient(45deg, rgba(255,221,131,1) 0%, rgba(242,105,57,1) 25%, rgba(207,46,146,1) 50%, rgba(76,100,211,1) 75%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffdd83",endColorstr="#4c64d3",GradientType=1);
border-right:1px solid #ffffff;}
#footer_fixedarea .eria:nth-of-type(2){width:15%; background:#ff0000; border-right:1px solid #ffffff;}
#footer_fixedarea .eria:nth-of-type(3){width:70%;}

#footer_fixedarea .eria-recruit {float: left; margin:0 auto 0; padding:4px 0; font-size:1em; line-height:1.3;}
#footer_fixedarea .eria-recruit:nth-of-type(1){width:50%; background:#06c755; border-right:1px solid #ffffff;}
#footer_fixedarea .eria-recruit:nth-of-type(2){width:50%; background:#3c72b9;}
#footer_fixedarea .eria-recruit i{color:#ffffff; font-size:1em; padding-right:2px;}
#footer_fixedarea .eria-recruit span{display: block; font-size: 0.8em; font-weight: normal;}

#footer_fixedarea p{color:#ffffff; margin:0 auto 0; text-align:center; font-size:1.1em; line-height:1.2;}
#footer_fixedarea i{color:#ffffff; font-size:1.8em;}
#footer_fixedarea img{height: 2em; width:auto;}
#footer_fixedarea span{display: block; font-size: 0.7em; font-weight: normal;}
#footer_fixedarea a:link,
#footer_fixedarea a:visited {color: #ffffff; text-decoration: none;}
#footer_fixedarea a:hover,
#footer_fixedarea a:active {color: #ffffff; text-decoration: none;}


/*==========================================
 contentCSS
===========================================*/
/* related-title ---------------------------------------*/
.related-title {position: relative; text-align:center; margin:0 auto 0; padding: 120px 0 22px 0; background:#f7f8e4;}
.related-title h4 {font-size: 1.8em; font-weight: normal; margin:18px auto; color: #484749; letter-spacing:2px; line-height: 1.2; position: relative;text-align: center;}
.related-title h4 span {font-size: 0.5em; font-weight:normal; color: #484749; display:block;}

/* related-subtitle    ceremonyheder---------------------------------*/
.related-subtitle {text-align:center; margin:38px auto 18px; padding:0;}
.related-subtitle h5 {font-size: 1.8em; font-weight: normal; margin:0 auto; color: #000000; letter-spacing:1px; line-height: 1.2em; position: relative;text-align: center;}
.related-subtitle h5 span {position: relative; z-index: 2; display: inline-block; background-color: #ffffff; margin:0 auto; padding:0 8px; text-align: center; color: #28a452;}
.related-subtitle h5::before {position: absolute; top: 50%; z-index: 1; content: ''; display: block; width: 100%; height: 1px; background: #ffffff;
background: -webkit-linear-gradient(-45deg, transparent, #bbb 10%, #bbb 90%, transparent);
background: linear-gradient(-45deg, transparent, #bbb 10%, #bbb 90%, transparent);}

/* related_stage-contents ---------------------------------------*/
.related_stage-contents {position: relative; text-align:left; padding: 2% 10%; margin: 20px auto 18px; background:#ffffff;}
.related_stage-contents h2{font-size: 2em; font-weight: normal; color: #484749; letter-spacing: 0.1em; line-height:1.2; text-align:center;}
.related_stage-contents h2 span{font-size: 0.7em; margin:8px; color:#86c57a; letter-spacing: 0.01em;}
.related_stage-contents h3 {font-size: 1.5em; font-weight:normal; color:#28a452; line-height:1.2; margin: 18px auto 0;}
.related_stage-contents h3 span{font-size: 0.7em; margin:8px; color:#888888;}
.related_stage-contents section {width: 100%;}
.related_stage-contents article {width: 100%;}
.related_stage-contents aside {/*width: 100%; course-list 48%*/}
.related_stage-contents p{margin:4px auto;}
/*--style_design同記述----*/
    .related_stage-contents .eria-tab{text-align:left; margin:0 18px; padding:0 22px;}
    .related_stage-contents .eria-margin22{margin:22px auto; padding:0;}
    .related_stage-contents .eria-margin38{margin:38px auto; padding:0;}
    .related_stage-contents .eria-topmargin22{margin:22px auto 0; padding:0;}
    .related_stage-contents .eria-topmargin{margin:48px auto 0; padding:0;}
/*--style_design同記述----*/

/* related_stage-contents_mp0---------------------------------------*/
.related_stage-contents_mp0 {position: relative; text-align:left; padding:0px 0px; margin: 8px auto 18px;}
.related_stage-contents_mp0 h2{font-size: 2em; font-weight: normal; color: #484749; letter-spacing: 0.1em; text-align:center;}

/* related_stage-contents-area***************************************/
.related_stage-contents-area{display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 auto 18px;}
.related_stage-contents-area_inner{width:50%; padding: 0 2%;}

/* inner ===========================================*/
.inner {max-width:100%; margin: 0 auto; padding: 18px 0;}
.inner:after{content: ""; display: block; clear: both}
.inner-auto {max-width:70%; margin: 0 auto; padding: 0;}
.inner-auto:after{content: ""; display: block; clear: both}
.inner-1024px {max-width:1024px; margin: 0 auto; padding: 18px 0;}
.inner-1024px:after{content: ""; display: block; clear: both}
.related_stage-contents .eria-left {float: left; width: 48%; margin:0 auto; padding:8px 0.5%;}
.related_stage-contents .eria-right {float: right; width: 48%; margin:0 auto; padding:8px 0.5%;}
.related_stage-contents .eria-left-07 {float: left; width: 70%; margin:0 auto; padding:8px 0.5%;}
.related_stage-contents .eria-right-03 {float: right; width: 30%; margin:0 auto; padding:8px 0.5%;}
.related_stage-contents .eria-left-03 {float: left; width: 30%; margin:0 auto; padding:8px 0.5%;}
.related_stage-contents .eria-right-07 {float: right; width: 70%; margin:0 auto; padding:8px 0.5%;}
.related_stage-contents .eria-left_border {float: left; width: 48%; margin:0 auto 22px; padding:8px 0.5%; border:solid 1px #cccccc; border-radius: 8px;}
.related_stage-contents .eria-right_border {float: right; width: 48%; margin:0 auto 22px; padding:8px 0.5%; border:solid 1px #cccccc; border-radius: 8px;}
/* staffonly  ===========================================*/
.related_stage-contents .eria-left-staff {float: left; width: 38%; margin:0 auto; padding:8px 0.5%;}
.related_stage-contents .eria-right-staff {float: right; width: 58%; margin:0 auto; padding:8px 0.5%;}


/* related_stage-contents ---------------------------------------*/
.related_stage-contents_bkc001 {background:#333132; color: #ffffff; }
.related_stage-contents_bkc002 {background:#758492; color: #ffffff; }
.related_stage-contents_bkc003 {background:#dff1f1;}
.related_stage-contents_bkc004 {background:#67c3c7;}
.related_stage-contents_bkc005 {background:#fff2bd;}
.related_stage-contents_bkcimg001 {
background-repeat: no-repeat;
background-position: top;
background-size: cover; 
background-image: url("../img/bkcimg001.jpg");
}

.related_stage-contents_bkcimg002 {
background-repeat: no-repeat;
background-position: top;
background-size: cover; 
background-image: url("../img/bkcimg002.jpg");
}

.related_stage-contents_bkcimg003 {
background-repeat: no-repeat;
background-position: top;
background-size: cover; 
background-image: url("../img/bkcimg003.jpg");
}

/* bridal-service **************************************************/
#bridal-service{margin: 0 auto; padding: 0; background:#dff1f1;}
#bridal-service:after{content: ""; display: block; clear: both}
#bridal-service .service-area{color: #222222; display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto; padding:8% 0 0 0%; position: relative; z-index: 1;}
#bridal-service .service-area::after{opacity: 0;}
#bridal-service .service-area section{width:auto; padding: 0 0.5%;}
#bridal-service .service-area section h3{font-size:2rem; margin: 0 0 30px 0;}
#bridal-service .service-area section p{margin: 0 0 30px 0;}

/* servicemenu ******************************************/
#servicemenu{margin: 0 auto; padding: 4% 10%; background:#ffffff; color: #222222; border-top:solid 1px #28a452;}
#servicemenu h2{font-size: 2em; font-weight: normal; color: #484749; letter-spacing: 0.1em; text-align:center;}

/* topics-description ***********************************************/
.topics-area-description{margin:0 auto 1%;/*display: flex; justify-content: space-around; flex-wrap: wrap;*/}
.topics-area-description article{background: linear-gradient(45deg,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%);}
.topics-area-description article:nth-of-type(1){width:24%; float: left; margin:0.5%; box-shadow: 0 0 5px #888888;}
.topics-area-description article:nth-of-type(2){width:24%; float: left; margin:0.5%; box-shadow: 0 0 5px #888888;}
.topics-area-description article:nth-of-type(3){width:24%; float: left; margin:0.5%; box-shadow: 0 0 5px #888888;}
.topics-area-description article:nth-of-type(4){width:24%; float: left; margin:0.5%; box-shadow: 0 0 5px #888888;}
.topics-area-description .topics-block-sub{padding:8px 10px;}
.topics-area-description .topics-block-sub h4{font-size: 1.1em; margin:0 auto; color:#333333; line-height: 1.5;}
.topics-area-description .topics-block-sub h4 span{display: block; font-size: 0.7em; color:#333333; margin:0;}
.topics-area-description .topics-block-sub p{font-size: 1em; margin:0 auto;}
.zoomOut-sub .mask{border-radius: 5px 5px 0 0;}
/*=　7-2 ===========================================================*/
.zoomOut-sub img{border-bottom: 1px solid #888888; transform: scale(1.1); transition: .3s ease-in-out;}
.zoomOut-sub:hover img{transform: scale(1);}
.zoomOut-sub .mask{display: block; height: 12vw; overflow: hidden;}