@charset "UTF-8";
/* CSS Document */

#main{ max-width:750px; margin: auto; color: #4D4948; min-height: 90vh;}


#main .ttl_wrap{}
#main .ttl_wrap .ttl1{ width: 100%; margin:0 auto;}
#main .ttl_wrap .ttl2{ background: #E96093; padding: 4% 3%;}
#main .ttl_wrap .ttl2 .img{ width: 65%; margin:0 auto .5em;}
#main .ttl_wrap .ttl2 .text{ color: #FFF; font-weight: bold; font-size: 1.8em; text-align: center;}
#main .ttl_wrap .ttl2 .text span{ display: inline-block;}

#main #index{ width: 94%; margin: 2em auto;}
#main #index .mokuji{ background: #F9EAF0; padding: 0.15em 0.5em; border-radius: 1em; text-align: center; font-weight: 600; font-size: 1.2em;}
#main #index .link{ width: 90%; margin:0.5em auto; font-size: 1.1em;}
#main #index .link a{text-decoration:underline;}
#main #index .link a::before{content: "・";}

#main #index_fixed{ position: fixed; right: 0; bottom: 0; width: 100%; z-index: 9; padding-top: 0.5em;}
#main #index_fixed .mokuji{ width: 4.5em; height: 4.5em; line-height: 4.5em; background: #F9EAF0;  border-radius: 50%; text-align: center; font-weight: bold; font-size: 1.3em; margin: 0 1em 0.75em auto;box-shadow: 0 0 0.3em 0.1em rgba(233,96,147,0.5);}
#main #index_fixed .slide_wrap{background: #F9EAF0; padding: 1.5em 2em 1em;box-shadow: 0 0 0.3em 0.0em rgba(0,0,0,0.5);display: none;
	 max-height: 60vh; overflow: auto;}
#main #index_fixed .link{ width: 100%; margin:0 auto 0.75em; font-size: 1.1em;}
#main #index_fixed .link a{text-decoration:underline;}
#main #index_fixed .link a::before{content: "・";}


#main #data_wrap{ margin-bottom: 8em;}
#main #data_wrap h1{ position: relative; font-size: 1.2em; font-weight: bold; padding: 0.4em 0.5em 0.5em; width: 94%; margin: 2.5em auto 0.5em;}
#main #data_wrap h1 span{ position: relative; z-index: 3;}
#main #data_wrap h1::before{ content: ""; width: 100%; height: 100%; position: absolute; left: -0.15em; top:-0.12em; background: #F9EAF0; z-index: 2;}
#main #data_wrap h1::after{ content: ""; width: 100%; height: 100%; position: absolute; right: -0.15em; bottom:-0.12em; border: 1px solid #E96093; z-index: 2}

#main #data_wrap h2{ position: relative; font-size: 1.2em; font-weight: bold; padding: 0.4em 0.5em 0.5em; width: 94%; margin: 2.5em auto 0.5em;}
#main #data_wrap h2 span{ position: relative; z-index: 3;}
#main #data_wrap h2::before{ content: ""; width: 100%; height: 100%; position: absolute; left: -0.15em; top:-0.12em; background: #F9EAF0; z-index: 2;}
#main #data_wrap h2::after{ content: ""; width: 100%; height: 100%; position: absolute; right: -0.15em; bottom:-0.12em; border: 1px solid #E96093; z-index: 2}


/*#main #data_wrap h3{ background: url("../images/line.png") no-repeat center bottom / 100% auto; font-size: 1.1em; padding: 0 0.5em 0.8em; margin: 2em auto 0.5em; width: 94%;}*/
#main #data_wrap h3{ background: url("../images/line.png") repeat-x left bottom / 0.5em auto; font-size: 1.1em; font-weight: 600; padding: 0 0.5em 1em; margin: 2em auto 0.5em; width: 94%;}

#main #data_wrap h4{display:flex;justify-content:flex-start;align-items:center;margin: 2em auto 0.5em; width: 94%; font-weight: 600;}
#main #data_wrap h4::before{content:""; display: block; width: 1.5em; height: 1.5em; background:url("../images/star.png") no-repeat center center /100% auto; margin: 0 0.3em 0 0;}

#main #data_wrap p{ width: 94%; margin: 1em auto;}

#main #data_wrap u{ text-decoration: underline;}
#main #data_wrap b{ font-weight: bold;}
#main #data_wrap i{ font-style: italic;}



/******************************
	モーダル用ここから
******************************/
body.modal_on{overflow:hidden;}
#sanin #modal{ position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.30); font-size:1em; line-height:1.8; z-index:9;overflow: auto;
display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
-webkit-box-pack:space-between;-moz-box-pack:space-between;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;
-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;
flex-wrap:wrap;
-moz-transition-property : transform;-webkit-transition-property : transform;-o-transition-property : transform;-ms-transition-property : transform;transition-property : transform;
-moz-transition-duration : 0.4s;-webkit-transition-duration : 0.4;-o-transition-duration : 0.4s;-ms-transition-duration : 0.4s;transition-duration : 0.4s;
-moz-transform: scale(0);-webkit-transform: scale(0);-o-transform: scale(0);-ms-transform: scale(0);transform: scale(0);
}
#sanin #modal::before,
#sanin #modal::after{ content:""; width:100%; height:50px;}
#sanin #modal .modal_wrap{ position:relative; margin:auto; background:rgba(255,255,255,0.9); max-width:300px; padding:1em; width:90%;}
#sanin #modal .modal_wrap p{ display:block; padding:0.2em 0; min-width:7em; text-align:center; cursor:pointer;}
#sanin #modal .modal_wrap p{ display:block; border-bottom:1px solid rgba(0,0,0,0.25); margin-bottom:0.2em;}
#sanin #modal .modal_wrap p:last-of-type{ border-bottom:none;}
#sanin #modal .modal_wrap .modal_close{ position:absolute; right:0.5em; top:0.5em; width:1.5em;}
/******************************
	モーダル用ここまで
******************************/