@charset "UTF-8";
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');


/*------------------------normalize*/
html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth;}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block;}audio,canvas,progress,video {display: inline-block; vertical-align: baseline;}a {background: transparent;}a:active,a:hover {outline: 0;}sub,sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sup {top: -0.5em;}sub {bottom: -0.25em;}img {border: 0;}svg:not(:root) {overflow: hidden;}figure {margin: 0;}hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0;}pre {overflow: auto;}button,input,optgroup,select,textarea {color: inherit; font: inherit; margin: 0;}button {overflow: visible;}button,select {text-transform: none;}button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button; cursor: pointer;}button[disabled],html input[disabled] {cursor: default;}button::-moz-focus-inner,input::-moz-focus-inner {border: 0; padding: 0;}input {line-height: normal;}input[type="checkbox"],input[type="radio"] {box-sizing: border-box; padding: 0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto;}input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}fieldset {border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}textarea {overflow: auto;}table {border-collapse: collapse; border-spacing: 0;}td,th {padding: 0;}img{ vertical-align: bottom;}
button{ border:none;}button:focus{ outline:none;}table { border-collapse: collapse; border-spacing: 0;}
*{ box-sizing: border-box;}
ul, ol{ margin: 0; padding: 0; list-style: none; }
dl, dt, dd{ margin: 0; padding: 0;}
/*------------------------normalizeEnd*/

body {
	background:#fff;
	font-family:'Hiragino kaku Gothic ProN', 'ヒラギノ角ゴ ProN W4', 'Meiryo', 'メイリオ', -apple-system, BlinkMacSystemFont, sans-serif;
	color:#4d4d4d;
	margin:0 auto;
	text-align:left;
	font-size:16px;
}

h1, h2, h3, h4, h5, h6, p, ul{ margin: 0; padding: 0; border: none;}
h2{ margin-bottom: 1em; color: #017540;}

.shopBox h2,
.answerBox h2{
padding: 1em; text-align: center;
border-bottom: 1px solid #017540;
}

section{ margin-bottom: 40px; }
@media screen and (max-width: 1080px) {
section{ margin-bottom: 20px; }
}
article{}
address{ font-style:normal;}

a{word-break: break-all;}
a:link, a:visited{ text-decoration: none; color:#007ab0;}
a:hover{ opacity: 0.6; transition: 0.4s; color:#0099FF;}
area { outline:none; }







/*------------------------Style*/
/* wrapBox */
.wrapBox{ width: 100%; max-width: 1080px; margin: 0 auto;}
@media screen and (max-width: 1080px) {
.wrapBox{ padding: 1em;}
}

/* main */
main{ text-align:left;}

.lawBox{ padding-top: 40px;}
.lawBox h2{ border-bottom: 1px solid #017540;}
@media screen and (max-width: 1080px) {
.lawBox{ padding-top: 20px;}
}


/* header */
header{
position: sticky;
top: 0;
width: 100%;
padding: 10px 0;
background: #fff;
z-index: 9999;
box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.2);
}
header .wrapBox{
display: flex;
justify-content: space-between;
align-items: center;
}
header figure figcaption{ font-size: 12px; text-align: center;}

@media screen and (max-width: 1080px) {
header{ margin-bottom: 10px;}
header .wrapBox{ padding: 0 20px;}
header img{ width: 100%; max-width: 74px;}
header figure figcaption{ font-size: 10px; padding-top: 2px;}
}




/* mainImg */
.mainImg{ width: 100%; max-width: 1080px; margin: 0 auto 40px; text-align: center;}
.mainImg img{ width: 100%; margin: 0 auto;}
@media screen and (max-width: 1080px) {
.mainImg{ margin-bottom: 20px;}
.mainImg img{ max-width: 600px;}
}




/* btnbox01 */
.btnbox01{ margin-bottom: 40px;}
.btnbox01 section{ width: 23%; position: relative; border-radius: 8px; display: flex; justify-content: center; align-items: center; margin-bottom: 0;}
.btnbox01 section img{ width: 100%; max-width: 238px;}
.btnbox01 section a{
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
@media screen and (max-width: 1080px) {
.btnbox01{ margin-bottom: 0;}
.btnbox01 section{ width: 48%; margin-bottom: 20px;}

}

.btnbox01 section a:hover{ border-radius: 8px; background: #fff;}
.btnbox01 .btn01{ background: #f9b1dc; border: 2px solid #fbc8e6;}
.btnbox01 .btn02{ background: #fffd08; border: 2px solid #fff000;}
.btnbox01 .btn03{ background: #00aeeb; border: 2px solid #4cc6f1;}
.btnbox01 .btn04{ background: #00a85f; border: 2px solid #4cc28f;}




/* notice */
.notice{ padding: 50px 0; background: #f7f6f0;}
.notice h2{ text-align: center; margin-bottom: 20px;}
.notice section{
position: relative;
width: 23%;
background: #fff;
border-radius: 8px;
padding: 1em;
text-align: center;
}
.notice section figure { margin-bottom: 20px;}
.notice section figure img{ width: 200px; height: 200px; object-fit: cover;}
.notice section h3{ margin-bottom: 10px;}
.notice section p{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.notice section span{
display: block;
margin-top: 20px;
color: #f29600;
font-size: 12px;
}
.notice section span i{ padding-right: 10px;}
.notice section a:link,
.notice section a:visited{ color: #000;}
/*.notice section a{
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.notice section a:hover{ background: #f7f6f0; border-radius: 8px;}*/
@media screen and (max-width: 1080px) {
.notice{ padding: 10px 0;}
.notice .wrapBox{ padding: 10px;}
.notice section figure img{ width: 100%; height: 150px; padding: 0;}
.notice section{
width: 48%;
margin: 10px auto;
}

}





/* newsBox */
.news{ margin-bottom: 50px;}
section.newsBox{ display: flex; justify-content: space-between; margin: 80px auto 10px;}
.news a{ display: block; padding: 5px 0;}
.news a:link,
.news a:visited{ color: #000;}

.newsBox h2{ font-size: 32px; font-weight: normal; width: 250px;}
.newsBox h2 span{ display: block; font-size: 20px; color: #f29600;}

.newsBox ul{ width: 100%; max-width: 760px;}
.newsBox ul li{
padding: 25px 0;
border-bottom: 1px solid #ccc;
}
.newsBox ul li span{ display: block; color: #00a85f; padding-left: 0.5em;}
.newsBox ul li{

background-image:url("../img/arrow.svg");
background-repeat:no-repeat;
background-position:left center;
padding-left:60px;
}
.news p.tR{ font-size: 12px;}
@media screen and (max-width: 1080px) {
section.newsBox{ display: block; margin: 20px auto;}
}




/* btnbox02 */
.btnbox02{ margin: 50px auto; padding: 50px 0; background: #fdf8e2;}
.btnbox02 ul{ display: flex; justify-content: space-between; width: 100%; max-width: 980px;}
.btnbox02 ul li{ width: 100%; max-width: 445px;}
.btnbox02 ul li img{width: 100%;}
@media screen and (max-width: 1080px) {
.btnbox02 { margin: 20px auto; padding: 10px 0;}
.btnbox02 ul{ display: block;}
.btnbox02 ul li{ display: block; width: 100%; margin: 20px auto;}
}


/* bnBox */
.bnBox{ display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; max-width: 980px;}
.bnBox a{ display: block; width: 300px; border: 1px solid #eee;}
.bnBox::after{
  content:"";
  display: block;
  width: 300px;

}
@media screen and (max-width: 1080px) {
.bnBox{ display: block; text-align: center;}
.bnBox a{ border: none; display: block; margin: 0 auto 10px;}
}


/* footer */
footer{ padding: 50px 1em;}
@media screen and (max-width: 1080px) {
footer{ padding: 0 1em 50px;}
}

/* footer .snsBox */
footer .snsBox{
margin: 50px auto;
text-align: center;
}
footer .snsBox a{ display: inline-block; margin: 0 25px;}

@media screen and (max-width: 1080px) {
footer .snsBox a{ width: 100%; max-width: 48px; margin: 0 15px;}
footer .snsBox a img{ width: 100%;}
}

/* footer ul */
footer ul{
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1080px;
margin: 20px auto;
font-size: 18px;
}
footer ul li{ display: inline-block;}
footer ul li a{ display: block; padding: 5px;}
footer ul li a:link,
footer ul li a:visited{ color: #000;}
footer ul li a::before{
content: '●';
color: #ccc;
}
footer small{ display: block; text-align: center; padding-top: 20px;}

@media screen and (max-width: 1080px) {
footer { padding-bottom: 60px;}
footer ul{ display: block; font-size: 16px;}
footer ul li{ display: block; text-align: center;}
footer ul li a{ display: block; padding: 1em; border-bottom: 1px solid #ccc;}
footer ul li a::before{
content: '';
}
}













/* contents */
/* .link a{ color: #000;}
@media screen and (max-width: 1080px) {
} */

.title01{ background: #dd708c; color: #fff; margin-bottom: 1em; padding: 8px; border-radius: 4px;}
.note{ padding: 1em; background: #fffbdb; border-radius: 8px;}


.btnC {}
.btnC input{ display: block; text-align: center; width: 30%; min-width: 8em; margin: 20px auto; padding: 10px; border-radius: 80px; border: none;}
.color01 input{ background: #feef34;}
.color02 input{ background: #a1d7d4;}

.sect01, .sect02, .sect03{ box-sizing: border-box; padding: 1em;}
.sect01{ background: #feef34;}
.sect02{ background: #a1d7d4;}
.sect01 input, .sect02 input{ box-sizing: border-box; margin-bottom: 1em; padding: 8px; border: none; border-radius: 4px; width: 100%;}
input[type="radio"],
input[type="checkbox"]{ width: auto; margin-right: 4px;vertical-align: 1px;}
textarea{ border: none; width: 100%; margin-bottom: 1em;}

.sect03{ border: 2px solid #17a862; border-radius: 4px; margin: 10px auto;}



/*passport*/
.passportBox{ box-sizing: border-box; width: 100%; max-width: 400px; margin: 0 auto; border: 1px solid #ccc; position: relative;}
.passportBox p{ font-size: 12px; margin: 18px 2em; padding: 0 0 4px; line-height: 1.4em; border-bottom: 1px solid #ccc;}
.passportBox img{ width: 100%;}
.passportBox .semiTransparent{ opacity: 0.2;}
.centerBox{ position: absolute; width: 100%; text-align: center; vertical-align: top; top: 35%; font-size: 24px; line-height: 1.4em;}




/*---_shop---*/
.srvBox{ box-sizing: border-box; margin: 1em auto; padding: 1em; background: #2ea6d8; color: #fff;}
main .tagBox a:link{ color: #fff;}
main .tagBox div{ box-sizing: border-box; font-size: 12px; margin: 4px 2px; padding: 0 1em; border-radius: 40px; display: inline-block;}

.CategoryTag{ background: #dd708c; color: #fff;}
.serviceTag{ background: #2ea6d8; color: #fff;}
.areaTag{ background: #72bb62; color: #fff;}

.link a{ color: #000;}
@media screen and (max-width: 1080px) {

}




/*---_answer---*/
main .cardBox{ box-sizing: border-box; transition: 0.4s;}
main .cardBox:hover{ background: #fef6e0; opacity: 0.8; transition: 0.4s;}
main .cardBox img{ margin-right: 1em;}
main .cardBox h3{ margin-bottom: 8px;}
main .cardBox h3 span{ font-size: 14px; margin-left: -8px; display: block;}

.service { margin:0.5em 0; padding:0.5em; background-color:#a75; color:#fff; }




/*モーダル*/
.myModal_popUp {display: none;}

input[name="myModal_switch"] {display: none;}

#myModal_open + label,
#myModal_close-button + label { cursor: pointer;}

#myModal_open + label ~ label {display: none;}

#myModal_open:checked + label ~ .myModal_popUp { display: block; left: 50%; top: 50%; transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
z-index: 998; position: fixed; width: 96%; height: auto; background: #fff;}

#myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content { -webkit-overflow-scrolling:touch; overflow-y: auto; padding: 10px 20px;}

#myModal_open:checked + label + #myModal_close-overlay + label { background: rgba(0, 0, 0, 0.70); display: block; z-index: 997; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; white-space: nowrap; text-indent: 100%; color: #fff;}

#myModal_open:checked ~ #myModal_close-button + label { position: fixed; z-index: 999; text-align: center; font-size: 40px; font-size: 25px; line-height: 44px; top: 0; right: 0; width: 44px; height: 44px; display: block; background: #fff; opacity: 0.8;}
#myModal_open:checked ~ #myModal_close-button + label::before { content: '×'; font-family: fontawesome;}


.myModal_popUp { animation: fadeIn 1s ease 0s 1 normal; -webkit-animation: fadeIn 1s ease 0s .8 normal;}
#myModal_open:checked ~ #myModal_close-button + label{ animation: fadeIn 2s ease 0s 1 normal; -webkit-animation: fadeIn 2s ease 0s 1 normal;}
@keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: .8;}}
@-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: .8;}}

/* タブとPC */
@media (min-width: 768px) {
#myModal_open:checked + label ~ .myModal_popUp { max-width: 600px; max-height: 600px;}

/* 閉じるボタン */
#myModal_open:checked ~ #myModal_close-button + label { right: 0; top: 0; width: 44px; height: 44px; overflow: hidden;}
#myModal_open:checked ~ #myModal_close-button + label::after { display: none;}
}

/*----------------------------------------------*/
/*ボタンの装飾--------------*/
/*ボタン共通*/
#myModal_open + label,
#myModal_open:checked ~ #myModal_close-button + label { transition: .3s ;}

/*開くボタン*/
#myModal_open + label {}

/*閉じるボタン*/
#myModal_open:checked ~ #myModal_close-button + label::before {content: '\f00d';font-family: fontawesome; width: 20px; color: #000;}

@media (min-width: 768px) {
#myModal_open:checked ~ #myModal_close-button + label::before {margin-right: 0;}
}

.myModal_popUp-content img{ width: 100%;}
.myModal_popUp-content p{ font-size: 10px; margin: 0; padding: 4px 0; line-height: 1.4em; border-bottom: 1px solid #ccc;}




/*  */
.passBtnBox{ width: 90%; max-width: 420px; margin: 10px auto;}
.passBtnBox .btn01 a{ box-sizing: border-box; display: block; text-align: center; margin: 20px; padding: 4px 30px; background: #feef34; border-radius: 80px; color: #000;}

.passBtnBox .btn02 a{ box-sizing: border-box; display: block; text-align: center; margin: 20px; padding: 8px 30px; background: #72bb62; border-radius: 80px; color: #fff;}


.btnC {}
.btnC input{ display: block; text-align: center; width: 30%; min-width: 8em; margin: 20px auto; padding: 10px; border-radius: 80px; border: none;}

.tabBox{ text-align: center; display: flex;}
.tabBox div{ width: 50%;}
.tabBox a{ color: #000; box-sizing: border-box;display: block; width: 100%; padding: 8px;}
.tabBox .tabPass a{ background: #feef34}
.tabBox .tabShop a{ background: #a1d7d4;}
.semiTransparent{ opacity: 0.5;}



/*table*/
.table01{ width: 100%; margin-bottom:2em; border-collapse: collapse;}
.table01 th{ border: 1px solid #cfcfcf; background: #efefef; padding: 1em;}
.table01 td{ border: 1px solid #cfcfcf; padding: 1em; color: #666;}


/*------------------------otherStyle*/
.PC{ display: block; }
.SP{ display: none; }

.flexBox{ display: flex; justify-content: space-between; flex-wrap: wrap; }


.red{ color: #cc0000;}

.B{ font-weight: bold; }
.kome{ text-indent: -1em; margin-left: 1em; }
.tC{ text-align: center; }
.tR{ text-align: right; }
.super{ vertical-align:super; font-size:0.5em;}
.italic{ font-style:italic;}
.serif{ font-family:Georgia, "Times New Roman", Times, serif;}

.noEvent{ pointer-events: none; }

.clear { clear:both; }
.clear hr { display:none; }
.cf:after{/*for modern browser*/
    content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden;}
.cf {zoom:1;/*for IE 5.5-7*/}

/*pagetop*/
.pagetop{ position: fixed; z-index: 9000; bottom: 10px; right: 10px; display: none;}
.pagetop a{ box-sizing: border-box; font-size: 14px; text-align: center; display: block; background: #fff; width: 42px; height: 42px; border-radius: 120px; padding-top: 12px;box-shadow: 0 0 4px 4px rgba(0,0,0,0.2);}
.pagetop a:link, .pagetop a:visited{ color: #147b99;}
.pagetop a:hover{ opacity: 0.6; transition: 0.2s;}

@media screen and (max-width: 1080px) {
.PC{ display: none; }
.SP{ display: block; }


}






































/*------------------------nav*/
.drawer{ z-index: 9999; display: flex; flex-direction: row; align-items: center; justify-content: space-between; position: fixed; top: 24px; right: 10px; padding: 0 9px; width: 48px; height: 48px; border-radius: 400px; background: rgba(0,159,232,1); }
.navbar_toggle{z-index:9999;}
.navbar_toggle_icon { position: relative; display: block; border-radius: 4px; height: 2px; width: 30px; background: #fff; -webkit-transition: ease .4s; transition: ease .4s;}
.navbar_toggle_icon:nth-child(1) { top: 0;}
.navbar_toggle_icon:nth-child(2) { margin: 8px 0;}
.navbar_toggle_icon:nth-child(3) { top: 0;}

/*OPEN時の動き*/
.navbar_toggle.open .navbar_toggle_icon:nth-child(1) {top: 10px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.navbar_toggle.open .navbar_toggle_icon:nth-child(2) {-webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0;}
.navbar_toggle.open .navbar_toggle_icon:nth-child(3) {top: -10px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

/*OPEN*/
.menu.open {
 -webkit-transform:translateX(0);
 transform:translateX(0);
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
}


@media screen and (min-width: 1081px) {
.drawer,
.navbar_toggle{ display: none;}
}

@media screen and (max-width: 1080px) {
.menu{ position: fixed; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition:ease .5s; transition:ease .5s; z-index:9998; top: 0; width: 100%; margin: 0;}
.menu nav{ padding: 20px 20px 80px; height: 100vh; overflow: scroll; font-size: 18px; text-align: left; }
}