@charset "UTF-8";

/* --------------------------------------------------
box
-------------------------------------------------- */
/* contents box --------------- */
.contentsBoxMargin{
box-sizing:border-box;
margin-top: 120px;
}
@media screen and (max-width: 950px) {
  .contentsBoxMargin{
  margin-top: 15%;
  }
}

/* boxHead --------------- */
.boxHead{
box-sizing: border-box;
margin: 0 0 60px;
padding: 20px 20px;
height: 230px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
.boxHead#pageTtl{
margin: 0 0 40px;
}
@media screen and (max-width: 950px) {
  .boxHead{
  margin: 0 0 7%;
  }
  .boxHead#pageTtl{
  margin: 0 0 5%;
  }
}
@media screen and (max-width: 750px) {
  .boxHead{
  padding: 5% 5%;
  height: 40vw;
  }
}

/* boxAccordion --------------- */
.boxAccordion{
margin: 0 0 1px;
box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
}
.boxAccordion .accordionTrigger{
box-sizing: border-box;
background-color:#968b8a;
padding: 2% 70px 2% 4%;
line-height: 1.5;
cursor:pointer;
position:relative;
z-index:1;
transition:0.2s;
}
.boxAccordion.faq .accordionTrigger{
padding-left: 7%;
}
.boxAccordion.faq .accordionTrigger:before{
content: "Q";
font-size: 200%;
position: absolute;
top: 8px;
left: 2%;
line-height: 1;
color: #fff;
}
.boxAccordion .accordionTrigger:hover{
opacity: 0.8;
}
.boxAccordion .accordionTrigger .txt{
display:block;
color:#fff;
}
.boxAccordion .accordionTrigger .more{
position:absolute;
top:0;
bottom:0;
right:0;
width:60px;
}
.boxAccordion .accordionTrigger .more:before{
content:"";
background-color:#fff;
width:14px;
height:2px;
margin:auto;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
transition:0.2s;
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
.boxAccordion .accordionTrigger.onclick .more:before{
-webkit-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}
.boxAccordion .accordionTrigger .more:after{
content:"";
background-color:#fff;
width:14px;
height:2px;
margin:auto;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.boxAccordion .accordionContent{
background:#fff;
margin-bottom: calc(25px + 3%);
position:relative;
color:#222;
}
.boxAccordion .accordionContent .inner{
padding: 4% 4%;
padding-bottom: calc(25px + 2%);
}
.boxAccordion.faq .accordionContent .inner{
padding-left: 7%;
position:relative;
}
.boxAccordion.faq .accordionContent .inner:before{
content: "A";
font-size: 200%;
position: absolute;
top: 34px;
left: 2%;
line-height: 1;
}
.boxAccordion .accordionContent .btnClose{
box-sizing:border-box;
display:block;
text-decoration:none;
position:absolute;
right:2%;
bottom:-25px;
z-index:2;
background:#968b8a;
border:1px solid #968b8a;
cursor:pointer;
padding: 0 4%;
height: 50px;
line-height: 50px;
color:#fff;
font-size: 90%;
transition:0.2s;
}
.boxAccordion .accordionContent .btnClose:hover{
opacity: 0.8;
}
@media screen and (max-width: 1000px) {
  .boxAccordion.faq .accordionTrigger:before{
  top: 6px;
  }
  .boxAccordion.faq .accordionContent .inner:before{
  top: 28px;
  }
}
@media screen and (max-width: 750px) {
  .boxAccordion .accordionTrigger{
  padding: 5% 60px 5% 4%;
  }
  .boxAccordion.faq .accordionTrigger{
  padding-left: 12%;
  }
  .boxAccordion.faq .accordionTrigger:before{
  left: 3%;
  }
  .boxAccordion .accordionTrigger .more{
  width:50px;
  }
  .boxAccordion .accordionContent{
  margin-bottom: calc(20px + 8%);
  }
  .boxAccordion .accordionContent .inner{
  padding: 8% 4%;
  padding-bottom: calc(20px + 4%);
  }
  .boxAccordion.faq .accordionContent .inner{
  padding-left: 14%;
  }
  .boxAccordion.faq .accordionContent .inner:before{
  left: 3%;
  }
  .boxAccordion .accordionContent .btnClose{
  padding: 0 8%;
  height: 40px;
  line-height: 40px;
  bottom: -20px;
  }
}

/* boxSeparate --------------- */
.boxSeparate.col2 > li{
box-sizing:border-box;
width:48%;
margin: 0 0 6%;
}
.boxSeparate.col2 > li:nth-of-type(odd){
clear:both;
float:left;
}
.boxSeparate.col2 > li:nth-of-type(even){
float:right;
}
.boxSeparate.col3 > li{
box-sizing:border-box;
float:left;
width:32%;
margin:0 0 5% 2%;
}
.boxSeparate.col3 > li:nth-of-type(3n+1){
clear:both;
margin:0 0 5% 0;
}
@media screen and (max-width: 750px) {
  .boxSeparate.col2 > li:nth-of-type(odd),
  .boxSeparate.col2 > li:nth-of-type(even){
  clear:none;
  float:none;
  width:100%;
  margin: 0 0 18%;
  }
  .boxSeparate.col3 > li,
  .boxSeparate.col3 > li:nth-of-type(3n+1){
  clear:none;
  float:none;
  width:auto;
  margin: 0;
  }
  .boxSeparate.col3 > li:nth-of-type(odd){
  clear:both;
  float:left;
  width:48%;
  margin: 0 0 10%;
  }
  .boxSeparate.col3 > li:nth-of-type(even){
  float:right;
  width:48%;
  margin: 0 0 10%;
  }
}

/* --------------------------------------------------
title
-------------------------------------------------- */
/* ttl --------------- */


/* --------------------------------------------------
table
-------------------------------------------------- */
/* tblComm --------------- */
.tblComm{
box-sizing:border-box;
width:100%;
}
.tblComm tr{
border-bottom: #ccc solid 1px;
}
.tblComm th,
.tblComm td{
box-sizing:border-box;
padding: 4% 2% 4%;
}
.tblComm th{
}
.tblComm thead th{
text-align:center;
}
.tblComm.separateBorder th,
.tblComm.separateBorder td{
border-right:#ccc solid 1px;
vertical-align:middle;
}
.tblComm.separateBorder thead th:nth-last-of-type(1),
.tblComm.separateBorder td:nth-last-of-type(1){
border-right:none;
}
@media screen and (max-width: 750px) {
  .tblComm:not(.noNarrow) th,
  .tblComm:not(.noNarrow) td{
  display:block;
  width:100% !important;
  padding: 8% 3% 8%;
  }
  .tblComm:not(.noNarrow) th{
  padding-bottom:0;
  font-weight: bold;
  font-size: 110%;
  }
  .tblComm:not(.noNarrow) td{
  padding-top:4%;
  }
  .tblComm.separateBorder:not(.noNarrow) th,
  .tblComm.separateBorder:not(.noNarrow) td{
  border-right:none;
  }
}

/* tblNoNarrowWrap --------------- */
.tblNoNarrowWrap{
overflow-x:auto;
}
.tblNoNarrowWrap table.noNarrow{
min-width:700px;
}
.tblNoNarrowWrap .tblNoNarrowWrapNote{
display:none;
font-size:90%;
color:#f00;
margin:2% 0;
text-align:center;
}
@media screen and (max-width: 750px) {
  .tblNoNarrowWrap .tblNoNarrowWrapNote{
  display:block;
  }
  .tblNoNarrowWrap table.noNarrow th,
  .tblNoNarrowWrap table.noNarrow td{
  width:auto !important;
  display:table-cell !important;
  }
}

/* --------------------------------------------------
list
-------------------------------------------------- */
/* list --------------- */


/* --------------------------------------------------
button
-------------------------------------------------- */
/* btn --------------- */


/* --------------------------------------------------
banner
-------------------------------------------------- */
/* bnr --------------- */


/* --------------------------------------------------
text
-------------------------------------------------- */
.txtGothic{
font-family: Lato, "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
font-weight:500;
}
.txtMincho{
font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "Times New Roman", serif;
font-weight:500;
}
.txtEnglish{
font-family: Lato, sans-serif;
font-weight:400;
}
.txtUnderline{
text-decoration:underline;
}
.txtBig{
font-size:120%;
}
.txtSmall{
font-size:85%;
}
.txtNormal{
font-weight:normal;
}
.txtWeight{
font-weight:bold;
}
.txtItalic{
font-style: italic;
}
.txtBlack{
color:#000;
}
.txtRed{
color:#e60000;
}
.txtError{
color:#f00;
font-weight: bold;
}
.txtBorderShadow{
text-shadow:
2px 2px 0px #fff,
2px -2px 0px #fff,
-2px 2px 0px #fff,
-2px -2px 0px #fff,
-2px 0px 0px #fff,
2px 0px 0px #fff,
0px 2px 0px #fff,
0px -2px 0px #fff,
3px 3px 4px rgba(0,0,0,0.7);
}
.txtLineDeco{
display: inline;
position: relative;
z-index: 1;
}
.txtLineDeco:before{
content: "";
position: absolute;
bottom: -2px;
left: -5px;
border-radius: 999px;
background: #fff45c;
height: 15px;
width: calc(100% + 10px);
z-index: -1;
}
.txtCatch{
margin: 0 0 40px;
}
.txtCatch .txt{
display: block;
margin: 1% 0 0;
font-size: 75%;
}
@media screen and (max-width: 950px) {
  .txtCatch{
  margin: 0 0 5%;
  }
}
@media screen and (max-width: 750px) {
  .txtCatch .txt{
  margin: 2% 0 0;
  font-size: 90%;
  }
  .txtForSp{
  text-align:left;
  }
  .txtForSp br{
  display:none;
  }
  span.txtForSp{
  display:inline-block;
  }
}
@media screen and (min-width: 750px) {
  .br-pc{display:block;}
  .br-sp{display:none;}
}
@media screen and (max-width: 750px) {
  .br-pc{display:none;}
  .br-sp{display:block;}
}

/* --------------------------------------------------
animation
-------------------------------------------------- */
/* animate with js --------------- */
.animateScroll{
animation-duration: 0.8s;
animation-timing-function: ease;
}
.animateScroll[data-class="fadeInUp"]{
animation-delay: 0.3s;
}
.animateClick[data-class="shake"]{
animation-duration: 1s;
animation-timing-function: ease-in;
}
.animateHover{
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
}

/* scroll fadein animation with js --------------- */
@media screen and (min-width: 750px) {
  .scrollFadein {
  opacity : 0;
  transform : translate(0, 50px);
  transition : all 300ms;
  }
  .scrollFadein.scrollin {
  opacity : 1;
  transform : translate(0, 0);
  }
}

/* animLink --------------- */
.animLink,
.animLink a{
transition: 0.2s;
}
.animLink:hover,
.animLink a:hover{
opacity: 0.7;
}

/* --------------------------------------------------
other classes
-------------------------------------------------- */
/* clear fix --------------- */
.clearFix:after{
content:"";
clear:both;
display:block;
}

/* hide --------------- */
.noDisp{
display:none;
}

/* align --------------- */
.alignCenter{
text-align: center;
}
.alignLeft{
text-align: left;
}
.alignRight{
text-align: right;
}

/* form required --------------- */
.required,
.nRequired{
background-color:#f02323;
color:#fff;
display:inline-block;
font-weight:normal;
font-size:12px;
margin:0 5px;
padding:0;
text-align:center;
line-height:22px;
width:40px;
}
.nRequired{
background-color:#999;
}
.required.right,
.nRequired.right{
margin-top:5px;
float:right;
}

/* input form --------------- */
.focusAnimation{
border:1px solid #aaa;
transition:all 0.3s ease-in-out 0s;
}
.focusAnimation:focus{
border:1px solid #39c;
box-shadow:0 0 5px #39c;
outline:medium none;
transition:all 0.3s ease-in-out 0s;
}
input.narrowSize{
box-sizing:border-box;
width:20%;
}
input.smallSize{
box-sizing:border-box;
width:35%;
}
input.middleSize{
box-sizing:border-box;
width:55%;
}
input.wideSize{
box-sizing:border-box;
width:80%;
}
input.fullSize{
box-sizing:border-box;
width:100%;
}
textarea.fullSize{
box-sizing:border-box;
width:100%;
height:200px;
}
@media screen and (max-width: 750px) {
  input.narrowSize{
  width:35%;
  }
  input.smallSize{
  width:60%;
  }
  input.middleSize{
  width:100%;
  }
  input.wideSize{
  width:100%;
  }
}

/* zoom icon --------------- */
.icnZoomArea{
position:relative;
}
.icnZoomArea .icnZoom{
position:absolute;
bottom:0;
right:0;
background:url(../img/common/icon_zoom.png) 50% 50% no-repeat rgba(0,0,0,0.7);
width:35px;
height:35px;
}

/* imgCircle --------------- */
.imgCircle{
border-radius:999px;
}

/* effectShadow --------------- */
.effectShadow{
box-shadow: 20px 20px 0px 0px rgba(0,0,0,1); 
}

/* youtube movieWrap --------------- */
.movieWrap {
position: relative;
padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
height: 0;
overflow: hidden;
margin: 3% auto;
}
.movieWrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* arrowPrev & arrowNext --------------- */
.arrowPrev,
.arrowNext{
position: absolute;
top: calc(50% - 8px);
display: block;
width: 15px;
height: 15px;
border-top: solid 3px #999;
border-right: solid 3px #999;
cursor: pointer;
transition:all 0.1s ease;
}
.arrowPrev:hover,
.arrowNext:hover{
opacity: 0.3;
}
.arrowPrev{
left: -7%;
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.arrowNext{
right: -7%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
@media screen and (max-width: 500px) {
  .arrowPrev{
  left: -5%;
  }
  .arrowNext{
  right: -5%;
  }
}