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

/* ======================= 共通 * PC  =========================*/

* {margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}
header,footer,nav,section,article,aside {display: block;}
body {font-size: 16px; line-height: 1; background-color: #FFF; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
p,li,h1,h2,h3,h4,h5,th,td,dl,dt,dd {font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-size: 1rem; list-style: none;}
li,p,th,td,dl,dt,dd {line-height: 1.8;}
p {margin-bottom: 1rem;}
dd {margin-left: 3rem;}
dt {margin-left: 2rem;margin-top: .6rem; font-weight: 700;}
a {color: #000; text-decoration: none; border-bottom: #333 dotted 1px;}
header a {border-bottom: none;}
img {width: 100%; height: auto;}
a:hover {opacity: 0.7; filter: alpha(opacity=70); -ms-filter: alpha(opacity=70);}
.cf:before,.cf:after {content: ""; display: table; clear: both;}
.cf:after {clear: both;}
.cf {zoom: 1;}
/* For IE 6/7 */
.gothic {font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;}
#page-top {position: fixed; bottom: 20px; right: 20px; font-size: 77%;}
#page-top a {background: #666; text-decoration: none; color: #fff; width: 70px; padding: 30px 0; text-align: center; display: block; border-radius: 5px;}
#page-top a:hover {text-decoration: none; background: #999;}
#wrapper {width: 100%; height: auto; background: #FFFFFF;}
.hako {width: 100%; max-width: 1000px; margin: auto; position: relative;}
.topBox {padding-top: 0; height: auto; position: relative;}
.topBox__inner {writing-mode:vertical-rl; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(222, 222, 222, 1.0); padding: 3rem;}
.topBox__inner h1 {font-size: 1rem; line-height: 1; margin: 0; padding: 0;}
.topBox__inner h1 img {margin: 0; padding: 0;}
.topBox__inner p {font-size: 1.3rem; line-height: 2.1; text-align: justify;}
.topBox__inner p:first-child {margin: 0;}
.topBox__inner p:nth-of-type(n+2) {margin-top: 2rem; margin-left: 2rem;}
h2 {font-size: 1.6rem; font-weight: normal; margin-bottom: 2rem; text-align: center;}
h2:before {content: url(../_common/img/common/mrk01.svg); width: 24px; height: auto; display: inline-block; margin: 0 12px 3px 0;}
h3 {font-size: 1.2rem; font-weight: normal; line-height: 1.5; margin-bottom: .6rem;}
h3:before {content: url(../_common/img/common/mrk02.svg); width: 1.2rem; height: auto; display: block; float: left; margin: 2px 4px 0 0;}
h4 {font-size: 16px; font-weight: normal; line-height: 1.5;}
dt:before {content: "●"; color: #FFC877; margin: 0 4px 0 0;}
h5 {font-size: 14px; font-weight: normal; line-height: 1.5;}
h5:before {content: "❖"; color: #FFC877; margin: 0 4px 0 0;}
.sp_show {display: none;}
.pc_show {display: inline-block;}
.flRight {float: right; margin: 0 10px;}
.flLeft {float: left;}
.alRight {text-align: right;}
.aCenter {text-align: center;}
.alLeft {text-align: left;}
.small {font-size: smaller;}
.smallText {font-size: .7rem;}
.w200px {width: 200px; height: auto;}
.w300px {width: 300px; height: auto;}
.w400px {width: 400px; height: auto;}
img {max-width: 100%; max-height: auto;}
.caution {font-size: .9rem; color: #F44611;}
/* ======================= 共通 * PC  =========================*/

#header {position: relative; height: 70px;}
#header #logo {width: 298px; height: 43px; background: url(../_common/img/common/logo_hrs.svg) no-repeat; background-size: cover; text-indent: -9999px; position: absolute; top: 12px; left: 0;}
#header #logo a {display: block; width: 298px; height: 43px;}
#header #mn_main {position: relative; margin: auto; top: auto; height: auto; width: 100% !important; padding: 1rem; background-color: transparent;}
#header #mn_main>li {display: block; margin: 0 auto .6rem; padding: 0; height: auto; width: 100%; color: #444; font-weight: normal; font-size: 1.1rem;}
#header #mn_main>li a {color: #FFddee; padding-bottom: 0;}
#header #mn_main>li a:hover {display: block; background: none; background-position: auto; padding-bottom: 0;}
#header #mn_main>li.current {background: none; background-position: auto;}
#header #globalNav {background-color: #364A59; height: auto; position: absolute; z-index: 99; display: none; width: auto; padding: 0; top: 70px; right: 0;}
#header #spmnbtn a {display: block; position: absolute; right: 0; top:1rem;}
#top-img {background: url(img/bg-asa.png);}
.dan {width: 100vw;}
.dan:nth-of-type(n + 2) .hako {padding: 3rem 2rem;}
.dan:nth-of-type(odd) {background-color: rgb(236 237 247);}
.dan:nth-of-type(even) {background-color: #ffffff;}
.headInfo {width: 100%; height: auto; margin: 1rem auto; border: solid 2px #edc; padding: 1.8rem 3.4rem;}
.headInfo p {margin: 0; padding: 0;}
.headInfo .title {font-size: 1.4rem; text-align: center; line-height: 1; margin-bottom: .8rem;}
.biggerText {font-size: 1.15rem;}
.smallerText {font-size: .9rem;}
.inline-flex {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex; flex-wrap: wrap;}
.inline-flex>div {width: 50%; margin: 1rem auto; padding: .5rem;}
.pict {width: 90%; margin: auto;}
.para {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 2rem; margin-left: 1rem;}
.para .L {width: 43%;}
.para .R {width: 43%;}
.headMsg {background-color: rgb(236 237 247); margin: 0; padding: 1rem 2rem;}
.titleText {font-size: 1.15rem; position: relative; display: inline-block;}
.titleText::after {content: ""; display: block; height: 4px; background-color: rgb(223 224 234); border-radius: 4px; position: absolute; top: 100%; width: 100%;}
.moushikomi {margin: auto; width: 70%; border-radius: 20px; border: rgb(223,224,234) solid 2px; padding: 1.5rem 2rem;}
.moushikomi a {display: block; width: 30%; background-color: #FFC877; margin: 1rem auto .5rem; padding: .5rem; text-align: center;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
#yoyaku .btn {margin: 1rem auto;}
footer {background: rgb(226,151,12);background: linear-gradient(0deg, rgb(23 27 97) 0%, rgb(60 65 123) 35%, rgb(109 112 156) 100%);; padding: 1rem; text-align: center;}
.cp, .cp a {color: rgb(176 177 201);}
#bottom_nav ul {text-align: center; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
#bottom_nav li {display: inline-block;}
#cal {display: block; width: 100%; height: 800px; margin-left: 2rem;}
#sp-cal {display: none;}
#modal-content {width: 640px; min-width: 500px; max-height: 90vh; overflow-y: auto; margin: 0 ;padding: 1.5rem 2rem; border: 2px solid #aaa ;background: #fff ;position: fixed ;display: none ;z-index: 2;}
#modal-overlay {z-index: 1 ;display: none ;position: fixed ;top: 0 ;left: 0 ;width: 100% ;height: 120% ;background-color: rgba( 0,0,0, 0.75 ) ;}
#modal-content .pict {position: absolute; width: 40%; height: auto; right: 3%; TOP: 40%;}
.button-link {color: #00f ;text-decoration: underline ;}
.button-link:hover {cursor: pointer ;color: #f00 ;}
.full {text-decoration: line-through;}
/* ======================= モバイル  ========================= */

/* ======================= SP * 共通  =========================*/

@media (max-width: 768px) {
body {width: 100%; overflow-x: hidden; }
.hako {width: 100%; margin: auto; position: relative;}
p,li,h1,h3,h4,h5,th,td,dl,dt,dd {font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; font-size: .9rem; list-style: none;}
h2 {font-size: 1.2rem; font-weight: normal; margin-bottom: 1rem;}
h2:before {content: url(../_common/img/common/mrk01.svg); width: 1.2rem; height: auto; margin: 0 12px 3px 0;}
h3 {font-size: 1rem; font-weight: normal; line-height: 1.5;}
h3:before {content: url(../_common/img/common/mrk02.svg); width: 1rem; height: auto; display: block; float: left; margin: 0 4px 0 0;}
.sp_show {display: block;}
.pc_show {display: none;}
.dan:nth-of-type(n + 2) .hako {padding:6% 3%;}
p,dt,dd {margin-left: .2rem;}
#header {height: 60px;}
#header #logo {width: 70%; height: 60%; background-size: contain; left: 1%;}
#header #logo a {width: 100%; height: 100%;}
#header #spmnbtn a {width: 46px; height: 46px; right: 1%; top: 6px;}
#header #globalNav {top: 60px;}
.headInfo {width: 100%; height: auto; margin: .3rem auto; border: solid 2px #edc; padding: 3%;}
.headInfo p {margin: 0; padding: 0;}
#juyohin ul, #kitsuke ul, .headInfo ul, #satsuei ul {margin: .6rem 0;}
#juyohin li, #kitsuke li, .headInfo ul li, #satsuei li {list-style-type: circle!important; list-style-position: outside; margin-left: 1.5rem;}
#hayami table {margin-left: 0; width: 96%; margin: auto;}
#hayami th,#hayami td {font-size: .875rem;}
#juyohin ul, #kitsuke ul {margin:6% 3%;}

#cal {display: none;}
#sp-cal {display: block; position: relative; width:99%; margin:0 auto 1rem; padding-top: 160%; height: 0; overflow:scroll!important;overflow-scrolling: touch!important; -webkit-overflow-scrolling:touch!important;}
#sp-cal iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; border:none;}
.btn a {width: 100%; font-size: 1rem;}
#bottom_nav ul {text-align: center; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#bottom_nav ul li {margin: 1%;}
footer {padding: 1%;}
#contact .hako {padding:3% 1%;}
textarea, input {max-width: 100%;}
 /* ======================= tomoe PAGES * SP  =========================*/
}

@media (max-width: 600px) {
.biggerText {font-size: 1.05rem;}
.headMsg {background-color: rgb(236 237 247); margin: 0; padding: 1rem;}
.titleText {font-size: 1.05rem; position: relative; display: inline-block;}
.titleText::after {content: ""; display: block; height: 4px; background-color: rgb(223 224 234); border-radius: 4px; position: absolute; top: 100%; width: 100%;}
.moushikomi {margin: auto; width: 70%; border-radius: 20px; border: rgb(223,224,234) solid 2px; padding: 1.5rem 2rem;}
.inline-flex {margin-bottom: 1rem;}
.inline-flex>div {width: 100%; margin: 0 auto; padding: .5rem;}
.sp-reverse {flex-direction: column-reverse;}
.pict {width: 100%; margin: auto;}
.moushikomi a {display: block; width: 90%; background-color: #FFC877; margin: 1rem auto; padding: .5rem; text-align: center;}
.moushikomi {margin: auto; width: 100%; border-radius: 20px; border: rgb(223,224,234) solid 2px; padding: .5rem 1rem;}
#modal-content {width: 90%; min-width: 0; max-height: 90vh; overflow-y: auto; margin: 0 ;padding: 1rem; border: 2px solid #aaa ;background: #fff ;position: fixed ;display: none ;z-index: 2;}
#modal-content .pict {display: none;}
.dan {padding-right: 1rem;}
.dan:first-of-type {padding-right: 0;}
#shushi .boxLeft {width: 100%; padding-right: 0;}
#shushi .boxRight {width: 100%;}
#naiyou ol {margin-left: 0;}
#naiyou ol li {width: 100%; margin-bottom: 1.2rem;}
.para {display: block;}
.para .L, .para .R  {width: 100%; margin-bottom: 2rem;}
}