@charset "utf-8";

/*-------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;scroll-behavior: smooth;}
:focus{outline:0;}
html{scroll-behavior: smooth;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{font-weight:normal;text-align:left;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"";}
img{max-width:100%;height:auto;vertical-align:bottom;-webkit-backface-visibility: hidden;}
a img{max-width:100%;height:auto;border:0;}
a:hover img{opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; /*animation:fadeIn 1s ease 0s 1 normal;*/}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{font:16px/1.75 "kozuka-gothic-pr6n","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;color:#000;animation:fadeIn 2s ease 0s 1 normal; font-feature-settings : "palt"; font-weight: 400; font-style: normal; letter-spacing: 0.3rem;}
/*"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;*/
/*::after{ display: block; clear: both; content: '';}*/

/* リンク設定
------------------------------------------------------------*/
a{text-decoration:none;outline:0;vertical-align:baseline;color:#000;}
a:hover,a:active{color:#000;}

/**** Clearfix ****/
.inner:after{content:""; display:table;clear:both;}
.inner{zoom:1;}
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

/* 汎用クラス
*****************************************************/
.pcDisp{display:block;}
.spDisp{display:none;}

@media only screen and (max-width:644px){
.pcDisp{display:none;}
.spDisp{display:block;}
}

.fixedMenu{ position: fixed; right: 0; top: 30%; z-index: 100;}
.fixedMenu a{ background: url(images/line.png) no-repeat center top 10px #02c755; background-size: 30px 30px; color: #fff;  -ms-writing-mode: tb-rl;  writing-mode: vertical-rl; -webkit-text-orientation: upright;
  text-orientation: upright; padding: 50px 0 10px; line-height: 45px; box-sizing: border-box; border-radius: 5px 0 0 5px;font-family: "zen-maru-gothic", sans-serif;font-weight: 700; transition: 0.2s;}
.fixedMenu a:hover{ opacity: 0.5;}

@media only screen and (max-width:644px){
.fixedMenu_sp{ position: fixed; left: 0; bottom: 0; z-index: 100; width: 100%;}
.fixedMenu_sp ul{ display: flex;}
.fixedMenu_sp ul li{ width: 100%;}
.fixedMenu_sp ul li a{ color: #fff; display: block; padding: 10px 0 10px 45px; box-sizing: border-box;font-size: 12px; font-weight: 700; }
.fixedMenu_sp ul li:first-child a{ background: url(images/line.png) no-repeat left 10px center #02c755; background-size: 24px 24px;letter-spacing: 0.1rem;}
.fixedMenu_sp ul li:last-child a{ background: url(images/icon2.png) no-repeat left 10px center #53c1de;letter-spacing: 0.2rem;}
}

/* ヘッダー
------------------------------------------------------------*/
header{ position: relative;}
header h1{ opacity: 0.8; width: 125px; min-height: 640px; position: absolute; top: 30px; left: 40px;}
#kv img{ width: 100%;}

#inpage header::after{ display: block; clear: both; content: '';}
#inpage header h1{ opacity: 1; width: 125px; position: static; margin-top: 30px; margin-left: 40px;min-height: auto; float: left;}
#inpage header ul{ width: 400px; float: right; margin-right: 40px; margin-top: 40px;}
#inpage header ul li{ width: 250px; float: left; text-align: right;}
#inpage header ul li:first-child{ width: 150px;}
#inpage header ul li a{ transition: 0.2s;}
#inpage header ul li a:hover{ color: #53c1de;}

@media only screen and (max-width:644px){
#inpage header h1{width: 18%;margin-top: 20px; margin-left: 2%;}
#inpage header ul{ margin-top: 27px; margin-right: 2%; width: 70%;}
#inpage header ul li a{ font-size: 14px;}
#inpage header ul li{ width: 75%;}
#inpage header ul li:first-child{ width: 25%;}
}

/* コンテンツ
*****************************************************/
main{display:block;box-sizing:border-box; background: url(images/bg.jpg) no-repeat center top; background-size: 100% auto;}
main .inner12{max-width:1200px;width:96%;margin:0 auto;padding:0;box-sizing:border-box;}
main .inner14{max-width:1400px;width:96%;margin:0 auto;padding:0;box-sizing:border-box;}

#inpage main{ padding: 0; padding-top: 50px;}

@media only screen and (max-width:644px){
main{padding:30px 0;background: none;}
#inpage main{ padding-top: 20px;}
}

#index .inner{max-width:910px;width:90%;margin:0 auto;padding:0;box-sizing:border-box;}
#index ul{ display: flex;}
#index ul li{ width: 100%; margin-right: 2%;border: #53c1de solid 6px; border-radius: 20px; box-shadow: 0px 0px 15px -5px #777777;background: url(images/icon1.jpg) no-repeat center bottom 25px; transition: 0.2s;}
#index ul li:hover{ background: url(images/icon1.jpg) no-repeat center bottom 15px;}
#index ul li:last-child{ margin-right: 0;}
#index ul li a{ display: block; text-align: center; padding: 25px 0 60px;}
#index ul li a span{ font-size:13px;font-family: "zen-maru-gothic", sans-serif;font-weight: 400; }
#index ul li a .tit{font-size: 24px;font-family: "zen-maru-gothic", sans-serif;font-weight: 700; line-height: 1.2; background: url(images/titbg.png) no-repeat center bottom; background-size: 80% 30px; padding-bottom: 10px; margin-top: 10px;}
#index ul li:nth-child(2) a .tit{ margin-top: 20px;}
#index ul li:nth-child(3) a .tit{ margin-top: 45px;}

@media only screen and (max-width:644px){
#index .inner { width: 50%;}
#index ul{ display: block;}
#index ul li{ margin-bottom: 20px;}
}

#job{ background: rgba(83,193,222,0.25);}
#job ul li{ border: #53c1de solid 6px; border-radius: 20px; box-shadow: 0px 0px 15px -5px #777777; background: #fff; padding: 40px 30px; box-sizing: border-box; margin: 15px;}
#job ul li h3{ font-size:40px;font-family: "zen-maru-gothic", sans-serif; font-weight: 700; text-align: center; color: #fff; margin-bottom: 55px; line-height: 1;}
#job ul li h3 span{ background: #53c1de; border-radius: 50px; padding: 10px 60px; box-sizing: border-box;}
#job ul li .box::after{ display: block; clear: both; content: '';}
#job ul li .img{ width: 30%; float: left; border-radius: 20px; overflow: hidden;}
#job ul li .txt{ width: 65%; float: right;}
#job ul li .salary{ font-size: 35px; color: #368aa0; margin-bottom: 35px;}
#job ul li .salary span{background: linear-gradient(transparent 60%, #ffe152 30%); padding: 0 10px 5px;}
#job ul li .info{ font-size: 20px; margin-bottom: 20px;}
#job ul li ul::after{ display: block; clear: both; content: '';}
#job ul li ul li{ border: #53c1de solid 1px;border-radius: 5px; box-shadow:none; padding: 0; text-align: center; font-size: 12px; width: 48%; float: left; line-height: 40px; margin: 0 4% 15px 0;}
#job ul li ul li:nth-child(even){ margin-right: 0;}
#job ul li ul li .tit{ background: #53c1de;color: #ffff; width: 30%; float: left;}
#job ul li .btn{ border-top: dotted #368aa0 2.5px; padding-top: 25px; margin-top: 10px;}
#job ul li .btn a{ width: 300px; margin: 0 auto; display: block; text-align: center; line-height: 60px; font-size: 24px; color: #fff; background: #eb6877;font-family: "zen-maru-gothic", sans-serif;font-weight: 700; border-radius: 15px; transition: 0.2s;}
#job ul li .btn a:hover{ opacity: 0.5;}
#job ul li .txtarea{ border-top: dotted #368aa0 2.5px; padding-top: 25px; margin-top: 10px;}
#job table{ width: 100%;border: #53c1de solid 1px;border-radius: 5px; margin-bottom: 20px;}
#job table th,#job table td{ padding: 15px; box-sizing: border-box;}
#job table th{ text-align: center; width: 30%; color: #fff;background: #53c1de;}

@media only screen and (max-width:768px){
#job ul li ul li{ width: 100%; float: none; margin-right: 0;}
}

@media only screen and (max-width:644px){
#job ul li h3{ font-size:20px; width: 100%; margin-bottom: 40px;}
#job ul li h3 span { padding: 10px 20px; width: 100%; box-sizing: border-box;}
#job ul li .img{ width: 100%; float: none; margin-bottom: 20px;}
#job ul li .txt{ width: 100%; float: none;}
#job ul li .salary{ font-size: 15px; letter-spacing: 0.2rem; text-align: center; margin-bottom: 20px;}
#job ul li .salary span{ padding: 0 0px 5px;}
#job ul li .info{ font-size: 15px; font-weight: 700;}
#job ul li .btn a { width: 80%; line-height: 40px; font-size: 20px;}
#job table th,#job table td{ width: 100%; display: block;}
}

#reason ul li{ width: 100%; border: #53c1de solid 6px; border-radius: 20px; box-shadow: 0px 0px 15px -5px #777777;box-sizing: border-box; margin: 15px; margin-bottom: 70px; position: relative; background: #fff;}
#reason ul li:last-child{ margin-bottom: 0;}
#reason ul li:nth-child(odd) .img{ position: absolute; top: 70px; right: -45px;}
#reason ul li:nth-child(even) .img{ position: absolute; top: 70px; left: -45px;}
#reason ul li .point{ text-align: center; background: url(images/point.jpg) no-repeat; width: 141px; height: 103px; color: #fff;font-family: "zen-maru-gothic", sans-serif;font-weight: 400; }
#reason ul li .point span{ font-size: 50px;font-weight: 700; line-height: 1;}
#reason ul li:nth-child(odd) .point{ position: absolute; top: 0; left: 30px;}
#reason ul li:nth-child(even) .point{ position: absolute; top: 0; left: 325px;}
#reason ul li:nth-child(odd) h3{ font-size: 30px; color: #368aa0;font-family: "zen-maru-gothic", sans-serif; font-weight: 700; padding-top:35px; padding-left: 195px; }
#reason ul li:nth-child(even) h3{ font-size: 30px; color: #368aa0;font-family: "zen-maru-gothic", sans-serif; font-weight: 700; padding-top:35px; padding-left: 495px; }
#reason ul li:nth-child(odd) .topp{ width: 60%; margin:50px 30px; border-bottom:#368aa0 2.5px dotted; padding-bottom: 50px;}
#reason ul li:nth-child(even) .topp{ width: 60%; margin:50px 30px 50px 400px; border-bottom:#368aa0 2.5px dotted; padding-bottom: 50px;}
#reason ul li .sbox{ width: 70%; padding:50px 30px; box-sizing: border-box;}
#reason ul li .lbox{ width: 100%; padding:50px 30px; box-sizing: border-box;}
#reason ul li dl dt{ font-size: 20px; color: #368aa0;}
#reason ul li dl dt span{background: linear-gradient(transparent 60%, #ffe152 30%); padding: 0 5px 5px;}
#reason ul li dl dd{ margin-bottom: 20px;}
#reason ul li:nth-child(2) dl{ margin-top: 100px;}
#reason ul li:nth-child(4) h3{border-bottom:#368aa0 2.5px dotted;padding-bottom: 50px;margin:50px 30px 0 400px; padding-left: 0; text-align: center;}
#reason ul li:nth-child(4) .sbox{padding-left: 395px; width: 100%;}

@media only screen and (max-width:768px){
#reason ul li .img{ width: 40%;}
#reason ul li:nth-child(even) .point { left: 265px;}
#reason ul li:nth-child(even) h3 { padding-left: 425px;}
#reason ul li:nth-child(even) .topp { margin: 50px 30px 50px 280px;}
#reason ul li:nth-child(2) dl { margin-top: 0;}
#reason ul li:nth-child(4) h3 { padding-left: 0; margin: 50px 30px 0 270px;}
#reason ul li:nth-child(4) .sbox{padding-left: 265px;}
}

@media only screen and (max-width:644px){
#reason ul li{ margin: 0 0 30px;}
#reason ul li:nth-child(odd) .point,#reason ul li:nth-child(even) .point { left: 10px;}
#reason ul li .point { width: 100px; height: 75px; background-size: 100% auto;}
#reason ul li .point span { font-size: 40px; line-height: 0.5;}
#reason ul li:nth-child(odd) h3,#reason ul li:nth-child(even) h3 { font-size: 25px; padding-top: 70px; padding-left: 0; text-align: center;}
#reason ul li:nth-child(odd) .img,#reason ul li:nth-child(even) .img{ position: static; padding-top: 20px;}
#reason ul li .img{ width: 80%; margin: 0 auto 20px;}
#reason ul li:nth-child(odd) .topp,#reason ul li:nth-child(even) .topp{ width: 96%; margin: 0 auto 20px; padding-bottom: 20px;} 
#reason ul li .sbox,#reason ul li .lbox { width: 100%; padding: 20px 10px;}
#reason ul li:nth-child(4) h3 { padding: 20px 0px; margin: 0 auto; width: 96%;}
#reason ul li:nth-child(4) .sbox { padding-left: 0; margin: 0 auto; width: 96%;}
}

#greeting .inner12{ border: #53c1de solid 6px; border-radius: 20px; box-shadow: 0px 0px 15px -5px #777777;box-sizing: border-box; margin: 15px auto; position: relative; background: #fff; padding: 25px;}
#greeting .img{ position: absolute; top: 70px; right: -45px; width: 30%;}
#greeting h3{ text-align: center; font-size: 30px; color: #368aa0;font-family: "zen-maru-gothic", sans-serif; font-weight: 700; margin-bottom: 30px;}
#greeting .txt{ width: 70%;}
#greeting .txt p{ margin-bottom: 30px;}

@media only screen and (max-width:644px){
#greeting .img{ position: static;width: 80%; margin: 0 auto 20px;}
#greeting h3 { font-size: 25px;}
#greeting .txt{ width: 100%; margin: 0 auto;}
}

#voice{ background: rgba(83,193,222,0.25);}
#voice ul li{ border: #53c1de solid 6px; border-radius: 20px; box-shadow: 0px 0px 15px -5px #777777; background: #fff; padding: 40px 30px; box-sizing: border-box; margin: 15px;}
#voice ul li .box::after{ display: block; clear: both; content: '';}
#voice ul li .imgbox{ width: 30%; float: left; font-size: 24px;}
#voice ul li .img{ border-radius: 20px; overflow: hidden; width: 100%; margin-bottom: 10px;}
#voice ul li .syoku{ font-size: 12px;}
#voice ul li .txt{ width: 65%; float: right;}
#voice ul li .q1{ margin-bottom: 40px;}
#voice ul li .q1 h3{ font-size: 22px; color: #368aa0; margin-bottom: 15px;}
#voice ul li .q2 h3{ font-size: 24px; margin-bottom: 15px;}
#voice .listbtn{ padding-top: 25px; margin-top: 10px;}
#voice .listbtn a{ width: 500px; margin: 0 auto; display: block; text-align: center; line-height: 100px; font-size: 35px; color: #fff; background: #53c1de;font-family: "zen-maru-gothic", sans-serif;font-weight: 700; border-radius: 15px; transition: 0.2s;}
#voice .listbtn a:hover{ opacity: 0.5;}

@media only screen and (max-width:644px){
#voice ul li .imgbox{ margin-bottom: 20px;}
#voice ul li .imgbox,#voice ul li .txt{ width: 100%; float: none;}
#voice .listbtn a { width: 80%; line-height: 70px; font-size: 25px;}
}

#joblist{ background: rgba(83,193,222,0.25);}
#joblist.single{ background: #fff;}
#joblist ul{ margin-bottom: 30px;}
#joblist ul::after{ display: block; clear: both; content: '';}
#joblist ul li{ border: #53c1de solid 6px; border-radius: 20px; box-shadow: 0px 0px 15px -5px #777777; background: #fff; padding: 40px 30px; box-sizing: border-box; width: 49%; margin-right: 2%; float: left;}
#joblist ul li:last-child{ margin-right: 0;}
#joblist ul li h3{ font-size:40px;font-family: "zen-maru-gothic", sans-serif; font-weight: 700; text-align: center; color: #fff; margin-bottom: 55px; line-height: 1;}
#joblist ul li h3 span{ background: #53c1de; border-radius: 50px; padding: 10px 60px; box-sizing: border-box;}
#joblist ul li .img{ width: 100%; border-radius: 20px; overflow: hidden; margin-bottom: 30px;}
#joblist ul li .img img{ width: 100%;}
#joblist ul li .txt{ width: 100%;}
#joblist ul li .salary{ font-size: 30px; color: #368aa0; margin-bottom: 35px; text-align: center;}
#joblist ul li .salary span{background: linear-gradient(transparent 60%, #ffe152 30%); padding: 0 10px 5px;}
#joblist ul li .info{ font-size: 20px; margin-bottom: 20px;}
#joblist ul li .btn{ border-top: dotted #368aa0 2.5px; padding-top: 25px; margin-top: 10px;}
#joblist ul li .btn a{ width: 300px; margin: 0 auto; display: block; text-align: center; line-height: 60px; font-size: 24px; color: #fff; background: #eb6877;font-family: "zen-maru-gothic", sans-serif;font-weight: 700; border-radius: 15px; transition: 0.2s;}
#joblist ul li .btn a:hover{ opacity: 0.5;}
#joblist .listbtn{ padding-top: 25px; margin-top: 10px;}
#joblist .listbtn a{ width: 500px; margin: 0 auto; display: block; text-align: center; line-height: 100px; font-size: 35px; color: #fff; background: #53c1de;font-family: "zen-maru-gothic", sans-serif;font-weight: 700; border-radius: 15px; transition: 0.2s;}
#joblist .listbtn a:hover{ opacity: 0.5;}


@media only screen and (max-width:768px){
#joblist ul{ display: block; width: 80%; margin: 0 auto;}
#joblist ul li{ margin: 0; margin-bottom: 20px; width: 100%; float: none;}
}

@media only screen and (max-width:644px){
#joblist ul li h3{ font-size:20px; width: 100%; margin-bottom: 40px;}
#joblist ul li h3 span { padding: 10px 20px; width: 100%; box-sizing: border-box;}
#joblist ul li .img{ width: 100%; float: none; margin-bottom: 20px;}
#joblist ul li .txt{ width: 100%; float: none;}
#joblist ul li .salary{ font-size: 15px; letter-spacing: 0.2rem; text-align: center; margin-bottom: 20px;}
#joblist ul li .salary span{ padding: 0 0px 5px;}
#joblist ul li .info{ font-size: 15px; font-weight: 700;}
#joblist ul li .btn a { width: 80%; line-height: 40px; font-size: 20px;}
#joblist .listbtn a { width: 80%; line-height: 70px; font-size: 25px;}
}

#voicelist{ background: rgba(83,193,222,0.25);}
#voicelist.single{ background: #fff;}
#voicelist ul{ margin-bottom: 30px;}
#voicelist ul::after{ display: block; clear: both; content: '';}
#voicelist ul li{ border: #53c1de solid 6px; border-radius: 20px; box-shadow: 0px 0px 15px -5px #777777; background: #fff; padding: 40px 30px; box-sizing: border-box; width: 49%; margin-right: 2%; float: left;}
#voicelist ul li:last-child{ margin-right: 0;}
#voicelist ul li .img{ width: 100%; border-radius: 20px; overflow: hidden; margin-bottom: 30px;}
#voicelist ul li .img img{ width: 100%;}
#voicelist ul li .syoku{ margin-bottom: 30px; margin-top: 15px;}
#voicelist ul li h3{ font-size:20px;font-family: "zen-maru-gothic", sans-serif; font-weight: 700; margin-bottom: 20px; color: #53c1de;}
#voicelist ul li .q1{ margin-bottom: 40px;}


@media only screen and (max-width:768px){
#voicelist ul{ display: block; width: 100%; margin: 0 auto;}
#voicelist ul li{ margin: 0; margin-bottom: 20px; width: 100%; float: none;}
}




/* 共通エリア
*****************************************************/
section{ padding: 65px 0;}
section::after{ display: block; clear: both; content: '';}
h2{ font-size: 40px; text-align: center;font-family: "zen-maru-gothic", sans-serif;font-weight: 700; margin-bottom: 50px; padding-bottom: 10px; background: url(images/titbg.png) no-repeat center bottom; }
h2 span{ font-size: 20px;font-weight: 400;}

@media only screen and (max-width:644px){
section{ padding: 30px 0;}
h2{ font-size: 25px; background-size: 97% auto; margin-bottom: 20px;}
}

.cta{ background: rgba(83,193,222,0.25);}
.cta .inner14{ border-top: dotted #fff 2.5px;}
.cta.noline .inner14{ border-top: none;}
.cta .btn{ margin-top: 60px;}
.cta.noline .btn{ margin-top: 0;}
.cta .btn a{ width: 635px; margin: 0 auto 45px; display: block; line-height: 90px; font-size: 30px; color: #fff; background: url(images/line.png) no-repeat left 40px center #02c755; background-size: 90px 90px;font-family: "zen-maru-gothic", sans-serif; font-weight: 700; border-radius: 15px; transition: 0.2s; padding: 25px 0 25px 180px; box-sizing: border-box;}
.cta .btn a:hover{ opacity: 0.5;}
.cta p{ text-align: center;font-size: 30px; margin-bottom: 30px;}
.cta .tel{ text-align: center; font-size: 48px; font-weight: 700;}

@media only screen and (max-width:644px){
.cta .btn { margin-top: 30px;}
.cta .btn a { width: 100%; margin: 0 auto 20px; line-height: 40px; font-size: 20px; background: url(images/line.png) no-repeat left 25px center #02c755; background-size: 40px 40px; padding: 15px 0 15px 80px;}
.cta p { font-size: 20px; margin-bottom: 10px;}
.cta .tel { font-size: 25px;}
}


/* フッター
*****************************************************/
footer{padding:50px 0;box-sizing:border-box; background: #53c1de;}
footer .inner14{max-width:1400px;width:96%;margin:0 auto;padding:0;box-sizing:border-box;}
footer .inner14::after{ display: block; clear: both; content: '';}
footer .logo{ width: 20%; float: left;}
footer .txt{ width: 75%; float: right; color: #fff; font-size: 24px;}

@media only screen and (max-width:644px){
footer .logo,footer .txt{ width: 90%; float: none; margin: 0 auto;}
footer .logo{ width: 50%; margin: 0 auto 20px;text-align: center; }
footer .txt{ font-size: 14px;}
}


/*=================================
スライダー
===================================*/
.slider { width:100%; margin:0 auto;}
.slick-prev,.slick-next { position: absolute; top: 42%; cursor: pointer; outline: none; height: 48px; width: 48px;z-index: 10;}
.slick-prev { left: -65px;background: url(images/prev.png) no-repeat;}
.slick-next { right: -65px;background: url(images/next.png) no-repeat;}
.slick-dots {display: none!important;}

@media only screen and (max-width:768px){
.slick-prev { left: -5px;}
.slick-next { right: -5px;}
}

@media only screen and (max-width:644px){
.slick-prev,.slick-next{ height: 30px; width: 30px; background-size: 30px 30px;}
}

/*==================================================
アコーディオン
===================================*/
.accordion-area{ list-style: none; margin:0 auto;}
.accordion-area section{ padding: 0 0 30px;}
.accordion-area li{ margin: 20px 0;}
.accordion-title { position: relative; cursor: pointer; font-weight: 700; font-weight: 600; font-weight: normal; font-size: 20px; padding: 10px; transition: all .5s ease; background: #f9f9f9;}
.accordion-title span{ font-size: 35px;font-family: "source-han-serif-jp-subset", sans-serif;font-weight: 600; font-style: italic;}
.accordion-title::before,.accordion-title::after{ position: absolute; content:''; width: 15px; height: 2px; background-color: #000;}
.accordion-title::before{ top:48%; right: 15px; transform: rotate(0deg);}
.accordion-title::after{ top:48%; right: 15px; transform: rotate(90deg);}
.accordion-title.close::before{transform: rotate(45deg);}
.accordion-title.close::after{transform: rotate(-45deg);}
.accordion-box { display: none; padding: 25px 10px 10px 60px; box-sizing: border-box;position: relative; }
.accordion-box:before{ position: absolute; content: "A."; top: 0; left: 10px;font-size: 35px;font-family: "source-han-serif-jp-subset", sans-serif;font-weight: 600; font-style: italic;}

@media only screen and (max-width:644px){
.accordion-title span,.accordion-box:before { font-size: 20px;}
.accordion-title { font-size: 15px; padding: 10px 32px 10px 10px;}
.accordion-box { font-size: 15px;padding: 35px 10px 10px 10px;}

}