@charset "utf-8";
/* CSS Document */
/*===================================================================
//  リセット
//=================================================================*/
* {min-height:0; min-width : 0;}
html {margin:0; padding:0; height:100%; font-size:62.5%; margin-top: 0!important;}
body {padding:0; margin:0; font-family: 'Muli', sans-serif,Meiryo,sans-serif; font-weight: 500; width:100%; -webkit-text-size-adjust:100%; position:relative; font-size:1.6rem; line-height:1.5; overflow-x:hidden; color: #222;}
figure    {margin:0;}
img       {border:none; vertical-align:middle;}
.clear    {clear:both; margin:0; padding:0; height:0; width:0;}
.clear hr {display:none; border:none; height:0px;}
* html .clearfix{ zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; }
 p,ul,li,ol,dl,dt,dd,figure{margin:0; padding:0; word-break:  keep-all; word-wrap:break-word;}
h1,h2,h3,h4,h5,h6 {margin:0;}
em,var,address {font-style:normal;}
a {text-decoration:none; word-break: keep-all; word-wrap:break-word;}
li {list-style-type: none;}
/*===================================================================
//  共通設定
//=================================================================*/
.clearfix:after {clear: both; content: ''; display: block;}
.alc {text-align:center !important;}
.all {text-align:left !important;}
.alr {text-align:right !important;}
.bold {font-weight: bold !important;}
.normal {font-weight: normal;}
a {-webkit-transition: color .5s ease; transition: color .5s ease;}
a:hover,a:hover span {cursor : pointer;}
p,ul,li,ol,dt,dd,figure,h1,h2,h3,h4,h5,h6,div,a,span,input,textarea,select {box-sizing: border-box;}
.fs12 {font-size: 1.3rem;}
.fs22 {font-size: 2.2rem;}
.fs30 {font-size: 3.0rem;}
.flex{display: flex;flex-wrap: wrap;}
.w10{width: 10%; box-sizing: border-box;}
.w20{width: 20%; box-sizing: border-box;}
.w40{width: 40%; box-sizing: border-box;}
.w50{width: 50%; box-sizing: border-box;}
.w60{width: 60%; box-sizing: border-box;}
.w100{width: 100%; box-sizing: border-box;}
.mb05{margin-bottom: 0.5em;}
.mb10 {margin-bottom: 1.0em;}
.mb15 {margin-bottom: 1.5em;}
.mb20 {margin-bottom: 2.0em;}
.redbox {padding: 3em 1em 3.0em; max-width: 1180px; border-bottom: 3px solid #ea1212;margin: 0 auto;}
.redbox {background: url(../img/bgtrired.gif) no-repeat left top,url(../img/bgtriblue.gif) no-repeat right bottom;}
.redbl {border-left: 3px solid #ea1212;}
.tit {font-size: 3.0rem; line-height: 1.3; text-align: center; margin: 0 0 2.0em 0; filter:drop-shadow(1px 1px 1px #ddd); font-family: 'kalam', cursive;}
.tit img {width: 180px; height: auto;margin:0 0.5em 0 0; }
.attention {position: relative; display: inline-block; padding: 0 30px; margin-bottom: 2em; font-weight: bold;}
.attention:before {position: absolute; left: 20px; top: 0; content: ""; width: 1px; height: 100%; background: #000; border-radius: 3px; transform: rotate(-25deg);}
.attention:after { position: absolute; content: ""; right: 20px; top: 0; width: 1px; height: 100%; background: #000; border-radius: 3px; transform: rotate(25deg);}
ol.decimal {padding: 0 1.5em 0 8%;}
ol.decimal li {list-style-type: decimal;}

/*===================================================================
//  PC common
//=================================================================*/
._sp,._linksp {display: none !important;}
.inner {width: 100%; max-width: 1180px; margin: 0 auto; border-right: 3px solid #ea1212; border-left: 3px solid #ea1212;}
a img{width: 100%; height: auto;}
.bwrap{border-left:10px solid #ea1212; border-right:10px solid #ea1212;}

header {border-bottom: 1px solid #f2f2f2; position: relative; height: 60px;}
h1 {width: 450px; position: absolute; left: 5px; top: 5px;  line-height: 1.2;}
h1 a,h1 a:hover,h1 a:visited {color: #222;}
h1 span{display: block; font-weight: normal;}
h1 img{max-width: 230px; width: 100%; height: auto;}
h2{width: 550px; font-size: 1.6rem; line-height:1.4; text-align:right; padding: 5px 0 0; position: absolute; top: 3px; right: 300px;; font-weight: normal;}
a.whatsappbtn{ position: absolute; top: 8px; right: 245px;}
a.whatsappbtn img{border-radius: 5px; width: 45px; height: auto;}

.entrywrap {padding: 0.5em 1.5em 1em; text-align: center;}
a.entrybtn {display: block; width: 100%; max-width: 350px; border-radius: 5px; background-image: -moz-linear-gradient( 90deg, rgb(5,183,35) 0%, rgb(65,228,92) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(5,183,35) 0%, rgb(65,228,92) 100%); background-image: -ms-linear-gradient( 90deg, rgb(5,183,35) 0%, rgb(65,228,92) 100%); box-shadow: 0px 5px 0px 0px rgba(51, 49, 49, 0.1); padding: 0.8em 0.5em 0.5em; color: #fff; font-weight: bold; position: relative; margin: 0 auto 2.0em; border: 3px solid #fff; box-shadow: 3px 3px 1px #ddd; letter-spacing: 0.2em;}
a.entrybtn:hover {box-shadow: none; transform: translateY(1px);}
a.entrybtn .free {background: #fff; color: #199039; display: block; font-size: 1.6rem; border-radius: 3px; margin: 0 0 0.2em; letter-spacing: 0; font-weight: normal;}
a.entrybtn .fs30 {display: inline-block; margin: 0 0.2em 0 0; letter-spacing: 0;}
a.entrybtn img.whaticon{width: 60px; height: auto; position: absolute; right: -45px; top: -20px; filter:drop-shadow(1px 1px 2px #ccc);}

.entrywrap.headerbtn {padding: 0.2em 0.2em 0; position: absolute; right: 5px; top:3px;}
.entrywrap.headerbtn a.entrybtn {font-size: 1.2rem; letter-spacing: 0.05em; padding: 0.4em 0.5em 0.2em; border: 2px solid #fff; margin: 0; font-size: 1.1rem;}
.entrywrap.headerbtn a.entrybtn .free{ font-size: 1.1rem; padding: 0 0.2em; margin: 0 0 0;}
.entrywrap.headerbtn a.entrybtn .fs30 {font-size: 1.4rem;}

/*slide*/
.slider4-wrap {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.slider-4 .slick-slide {
  height: auto;
  overflow: hidden;
}
.slider-4 .slick-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.progress_bar {
  width: 100%;
  background: #eaeaea;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.progress_bar .bar {
  width: 0%;
  height: 4px;
  background: #40e45b;
}
/*slide*/
._pc.gmemu.flex {align-items: center;}
.gmemu li {width:24%; margin: 0 0.5% 0.5em; border-radius: 5px; border: 2px solid #02b2bc; text-align: center; position: relative; box-shadow: 2px 2px 1px #ccc;}
.gmemu li a {display: block; padding: 1.3em 0.1em 1.2em; font-weight: bold; font-size: 1.7rem; color: #222;}
.gmemu li:nth-child(5) a,.gmemu li:nth-child(13) a {padding: 0.8em 0.3em 0.7em; line-height: 1.2;}
.gmemu li.kaigo a {background: url("../img/gchack.png") no-repeat left bottom,#fff; background-size: 15%;}
.gmemu li.kaigo a span {position: absolute; left: 0; right: 0; top: -25px; margin:0 auto; font-size: 1.4rem; letter-spacing: 0; background: #02b2bc; width: 97%; border-radius: 5px; color: #fff;line-height: 1.0; font-weight: normal; padding: 0.3em;}
.gmemu li:hover {transform: translateY(2px);}
.gmemu li:hover a {background: #02b2bc; color: #fff; }
.gmemu li.kaigo:hover a {background: url("../img/gchack_on.png") no-repeat left bottom,#02b2bc; background-size: 19%; color: #fff; }
.gmemu li:hover a span {background: #fff; color: #222; border: 1px solid #02b2bc; font-weight: bold;}

ol.decimal li {margin: 0 0 2.0em 0; font-weight: normal;}
ol.decimal li h4 {font-size: 2.5rem; margin: 0 0 0.5em; font-weight: bold; line-height: 1.2; font-family: 'kalam', cursive;}
.feature.redbox {background:  url(../img/bgtrired.gif) no-repeat left top,url(../img/bgtriblue.gif) no-repeat right bottom,url("../img/ciintajapansmile.png") no-repeat center bottom; background-size: 33px,33px,16%;}
.snsicon li {display: inline; padding: 0 0.3em; margin: 0 0 1.5em;}
.snsicon li img {width: 40px; height: auto;}
ul.flow li { display: inline-block; border:  2px solid #ea1212; width: 18%; box-sizing: border-box; margin: 0 1%; padding: 0.8em 0.5em 0.8em; position: relative; font-weight: normal;}
ul.flow li::after {content: ""; position: absolute; right: -18px; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #94df9f; top: 50%; transform: translateY(-50%);}
ul.flow li:last-child::after {display: none;}
ul.flow li h4 {margin: 0 0 0.5em; font-size: 2.0rem; line-height: 1.4; font-family: 'kalam', cursive;}
.fowwrap.redbox {border-bottom: none;}

.contawrap {background: url("../img/contabg.jpg") no-repeat center top; background-size: cover; padding: 2em 1em 0;}
.contawrap img.contalogo {width: 350px; height: auto; padding: 0.6em 0 0;}
.contawrap .tit {margin: 0 0 0.8em 0; font-family: 'kalam', cursive;}

footer {background:#ea1212; color: #fff;}
.footerinner {padding: 1.5em 0; background: url("../img/chitajapan_clogo.jpg") no-repeat right bottom; background-size: 40px; margin-bottom: 5px; font-weight: normal; letter-spacing: 0.05em;}
.footerinner p.fs12 {font-size: 1.5rem; padding: 0 1em 0 0;}
footer nav ul {border-top:1px solid #ff7f7f; border-bottom:1px solid #ff7f7f; text-align: right;}
footer nav ul li {display: inline-block; padding: 3px 15px;}
footer nav ul li a {color: #fff; font-size: 1.3rem;}
.copyr {text-align: center; font-size: 1.3rem; padding: 3px 0; font-weight: normal;}

.sidesnswrap {position: fixed; right: 0; top:70%; z-index: 9999;}
.sidesnswrap a{display: block;}
.sidesnswrap a img {width: 50px; height: 50px;}
.sidesnswrap li:hover a img {opacity: 0.9;}

@media screen and (max-width:1180px) {
.inner {border-left: none; border-right: none;}
h1 .fs12 {font-size: 1.1rem;}
h2 {width: 390px;font-size: 1.3rem; top: 8px;}
._pc.gmemu li a {font-size: 1.35rem;}
.gmemu li.kaigo a span {top: -35px;}
}
/*===================================================================
//  SPonly
//=================================================================*/

@media screen and (max-width:980px) {
html {overflow-x: hidden;}
._pc,.snsicon li a._pc {display: none !important;}
._sp {display: block !important;}
._linksp {display: inline-block !important;}
.fs12 {font-size:1.1rem;}
.fs22 {font-size: 2.0rem;}
.bwrap {border-left: 6px solid #ea1212; border-right: 6px solid #ea1212;}
.redbox {padding: 1.2em 0.5em 0.9em;}
.w10,.w20,.w40,.w50,.w60,.w100{width: 100%;}
header{height: 51px;}
h1 {width: 310px; padding: 2px 0 0 2px; letter-spacing: 0; line-height: 0.95; left: 2px;}
h1 .fs12{font-size: 1.0rem; letter-spacing: 0; line-height: 1.0; font-weight: normal;}
.redbox._sp h2 {width: 100%; font-size:2.2rem; line-height: 1.4; position: initial; font-family: 'kalam', cursive;}
.tit {margin: 0 0 1.0em 0; font-family: 'kalam', cursive;}
header a.whatsappbtn {display: none;}
.entrywrap.headerbtn {padding: 0; position:absolute; top: 1px; right: 3px;}
a.entrybtn .free {font-size: 1.4rem;}
.entrywrap.headerbtn a.entrybtn .free {letter-spacing: -0.05em;}
a.entrybtn {box-shadow: 2px 2px 1px #ddd;}
a.entrybtn img.whaticon {width: 45px; right: -21px; top: -26px;}
.redbl {border-left: 3px solid #fff;}
ol.decimal {padding: 0 0.5em 0 1.0em;}
.gmemu li {width: 100%; margin: 0 0 1.0em 0;}
.gmemu li.kaigo a {background: url("../img/gchack.png") no-repeat left bottom,#fff !important; background-size: 5% !important; padding: 0.6em 0.3em 0.2em;}
.gmemu li.kaigo a span {top: -20px;}
.gmemu li:hover {transform: translateY(2px);}
.gmemu li:hover a {background: #fff !important; color: #222!important; }
.gmemu li:hover a span {background: #02b2bc !important; color: #fff !important; border: 1px solid #02b2bc;}
.gyoushu h3.tit {margin:0 0 1.5em 0; font-family: 'kalam', cursive;}
.accordion {margin-bottom: 7px; border: 2px solid #02b2bc; border-radius: 5px;}
.accordion summary {display: block; list-style: none;  align-items: center; position: relative; padding: 0.5em 0.5em 0.4em; font-weight: 600; text-align: center; background: #e5feff;}
.accordion summary::-webkit-details-marker {display: none;}
.accordion summary::before,.accordion summary::after {position: absolute; right: calc(1em + 2.5px); width: 2px; height: 12px; border-radius: 5px; background-color: #02b2bc !important; content: '';}
.accordion summary::before {rotate: 90deg; top: 12px;}
.accordion summary::after {transition: rotate .3s; top: 12px;}
.accordion[open] summary::after {rotate: 90deg;}
.accordion p {transform: translateY(-10px); opacity: 0; margin: 0; padding: 0 2em 1.5em; color: #333333; transition: transform .5s, opacity .5s;}
.accordion[open] p { transform: none; opacity: 1;}
.accordion .gmemu.flex {background: #e5feff;}
.accordion .gmemu li { width: 95%; margin: 0.4em auto ; background: #fff;}
.accordion .gmemu li a {font-size: 1.6rem; padding: 0.3em 0.3em 0.2em}
.entrywrap {padding: 0.5em 0.5em 0em;}
.feature.redbox {background-size:33px,33px,12%; padding: 1.3em 0.5em 2.8em 0.7em;border-left:0px;}
.flow.flex {display: block;} 
.flow.flex li {width: 100%; margin: 0 0 1.5em;}
ul.flow li::after {transform: rotate(90deg); top: initial; right: initial; left: 48%; bottom: -25px;}
ul.flow li h4 {margin: 0 0 0.2em; font-size: 2.2rem;}
.contawrap {padding: 1.5em 0.5em 0.1em;background: url(../img/contabg.jpg) no-repeat 83% top; background-size: cover;}
.contawrap .tit,.contawrap p {line-height: 1.2;}
.contawrap img.contalogo {max-width: 300px; width: 80%;}
.sidesnswrap {bottom:0; left:50%; transform: translateX(-50%); right: initial; top:initial;display: flex;}
.sidesnswrap li{display: inline-block;}
.sidesnswrap a img {width: 40px; height: 40px;}
footer {padding: 0 0 3em 0;}
.footerinner {padding: 1.0em 0;}
.footerinner p.fs12 {padding: 0 0 0 0;}
footer nav ul {padding: 3px 0;}
footer nav ul li {padding: 1px 0 1px 15px;}
}

@media screen and (max-width:580px) {
header h1 {top: 0; width: 180px !important;}
h1 img {max-width: 160px !important; vertical-align: baseline;}
.entrywrap.headerbtn { top: 0px; right: 1px;}
a.entrybtn img.whaticon {width: 40px;}
.gmemu li.kaigo a span {top: -30px;}
.gmemu li.kaigo a {background-size: 10% !important;}
.feature.redbox { background-size: 33px,33px,25%;}
}
@media screen and (max-width:400px) {
.entrywrap.headerbtn {transform: scale(0.8,0.8); top: -1px; right: -18px;}
}