@charset "UTF-8";

/* ===================================================================

 file name  :  common.css

=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

/* --------------------------------------------------
 normalize.css v3.0.2 | MIT License | git.io/normalize
--------------------------------------------------- */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}h1,h2,h3,h4,h5{font-weight:normal;font-size:100%;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}small{font-size:80%;}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;vertical-align:bottom;}svg:not(:root){overflow:hidden;}figure{margin:0;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}pre{overflow:auto;}code,kbd,pre,samp{font-size:1em;font-family:monospace,monospace;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border: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-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver;}legend{padding:0;border:0;}textarea{overflow:auto;}optgroup{font-weight:bold;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}ul{padding:0;}ul li{list-style:none;}
main,figure,figcaption,time,small{ display: block;}
img{ vertical-align: bottom;}
address{ font-style: normal;}

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ width: 100%; font-size: 62.5%;}
body{
    min-width: 1060px;
    width: 100%;
    background: #fff;
    color: #000;
    font-size: 1.6rem;
    font-family: "Noto Sans JP", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
    line-height: 1;
}
*, *:after, *:before{ box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
a{ color: #fd7700; text-decoration: underline;}
a:hover{ text-decoration: none;}
.sp{ display: none;}
#wrap{ position: relative; background: url("/img/bg_hero.jpg") no-repeat bottom center / contain;}
#wrap.top{ background: url("/img/bg_hero.jpg") no-repeat top center / cover;}
figure img{ max-width: 100%; width: 100%;}
aside ul{ font-size: 0;}
aside li{ position: relative; display: inline-block; vertical-align: middle; font-size: 2.4rem; font-family: 'Roboto Condensed', sans-serif; line-height: 1; *display: inline; *zoom: 1;}
aside i{ display: inline-block; margin: 0 5px 0 0; width: 30px; height: 30px; border-radius: 100%; background: #005049; color: #fff; vertical-align: text-bottom; text-align: center; font-style: normal; font-size: 1.2rem; line-height: 30px !important; *display: inline; *zoom: 1;}
aside i.ico{ font-size: 1.6rem;}
.list{ margin: 30px 0 0; padding: 0 0 0 1.8rem;}
.list li{ margin: 10px 0 0; list-style: disc; line-height: 1.75;}
.list li:first-child{ margin: 0;}
.list li span{ display: inline-block; margin: 0 0 0 .5rem;}
.list-row2{ margin: 0 -15px; text-align: left; font-size: 0;}
.list-row2 li{ display: inline-block; padding: 0 15px; width: 40%; vertical-align: top; text-align: center; font-size: 1.6rem; *display: inline; *zoom: 1;}
.list-row2 img{ width: 100%;}
.list-row2 span{display: block;  margin: 5px 0 0; font-size: 1.3rem; font-family: 'Tahoma', 'Verdana', 'Segoe', sans-serif; line-height: 1.5;}
span.note{ display: inline-block; margin: 0 0 0 .5rem;}
p.note{ margin: 60px 0 0; padding: 15px 0 0; border-top: 1px dashed;}

@media screen and (max-width: 768px){
    body{ min-width: 0; font-size: 1.4rem;}
    .pc{ display: none;}
    .sp{ display: block;}
    #wrap{ background: none;}
    aside li{ display: block; margin: 10px 0 0; text-align: left; font-size: 1.8rem;}
    .list{ margin: 15px 0 0;}
    .list li{ margin: 10px 0 0; line-height: 1.5;}
    .list-row2{ margin: 0; text-align: left;}
    .list-row2 li{ display: block; margin: 15px 0 0; padding: 0 60px 0 0; width: 100%; text-align: center; font-size: 1.4rem;}
    .list-row2 span{ font-size: 1.2rem;}
    p.note{ margin: 30px 0 0; padding: 15px 0 0;}
}

/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ background: #fff; color: #005049;}
.header h1{ display: inline-block; height: 60px; vertical-align: middle; line-height: 60px; *display: inline; *zoom: 1;}
.header h1 a{ display: inline-block; height: 50px; color: #005049; line-height: 50px;}
.header h1 span{ display: inline-block; margin: 0 0 0 20px; height: 50px; letter-spacing: .4rem; font-weight: 700; font-size: 1.8rem; line-height: 50px; *display: inline; *zoom: 1;}
.header img{ width: 100px;}
.header .cont1{ position: relative; margin: 0 auto; width: 1060px; height: 60px; line-height: 60px;}
.header .cont2{ height: 60px; background: #005049; color: #fff; line-height: 60px;}
.header aside{ position: absolute; top: 0; right: 0;}
.header aside ul{ text-align: right;}
.header aside li{ margin: 0 0 0 20px;}
.header aside li:first-child{ margin: 0;}
.header aside a{ color: #005049; text-decoration: none;}
.header nav{ margin: 0 auto; width: 1060px;}
.header nav ul{ text-align: center; font-size: 0;}
.header nav li{ display: inline-block; width: 25%; border-right: 1px solid; font-size: 1.6rem; *display: inline; *zoom: 1;}
.header nav li:first-child{ border-left: 1px solid;}
.header nav a{ display: block; color: #fff; text-decoration: none;}
.header nav a:hover{ background: #037657;}
.header nav .current a{ background: #037657;}
.header button{ display: none;}
.stuck{ position: fixed; top: 0; left: 0; z-index: 999; width: 100%;}

@media screen and (max-width: 768px){
    .header{ padding: 0 0 0 15px; border-bottom: 1px solid #005049;}
    .header h1{ height: 50px; line-height: 50px;}
    .header h1 span{ margin: 0 0 0 10px; font-size: 1.6rem;}
    .header img{ width: auto; height: 40px;}
    .header .cont1{ width: 100%; height: 50px; line-height: 50px;}
    .header .cont2{ display: none;}
    .header aside{ display: none;}
    .header nav{ display: none;}
    .header button{ display: block;}
}

/* --------------------------------------------------
 main
--------------------------------------------------- */

/* hero */
.hero{ height: 600px;}
.hero .cont{ display: table; margin: 0 auto; width: 1060px; height: 100%;}
.hero h2{ display: table-cell; padding: 0 0 50px; width: 100%; height: 100%; vertical-align: middle; text-align: center;}
.hero img{ width: 60%; vertical-align: middle;}

@media screen and (max-width: 768px){
    .hero{ height: auto;}
    .hero .cont{ display: block; width: 100%; height: auto;}
    .hero h2{ display: block; padding: 0; height: auto;}
    .hero img{ width: 100%; vertical-align: bottom;}
}

/* common */
article{ margin: 0 auto; padding: 75px 0 240px; width: 1060px;}
article header h1{ color: #005049; font-size: 3rem;}
article section{ position: relative; display: table; margin: 75px 0 0; width: 100%;}
article h2{ position: relative; display: table-cell; width: 300px; color: #005049; vertical-align: top; font-size: 2.2rem;}
article .cont{ display: table-cell; padding: 75px 0 0; width: calc(100% - 300px); vertical-align: top;}
article h2:after{ position: absolute; top: 25px; left: 0; width: 1060px; height: 1px; background: #005049; content: "";}
article h2 span{ position: relative; z-index: 9; display: inline-block; padding: 0 30px; height: 50px; background: #005049; color: #fff; line-height: 50px; *display: inline; *zoom: 1;}
article h2 div{ margin: 45px 0 0;}
article h2 figure{ display: block; margin: 45px 0 0; width: 220px;}
article h2 figure img{ width: 220px; border-radius: 100%;}
article h2 figcaption{ margin: 15px 0 0; color: #000; text-align: center; font-weight: normal; font-size: 1.6rem; line-height: 1.75;}
article h3{ margin: 30px 0 0; font-weight: 700;}
article h3 + .list{ margin: 15px 0 0;}
article h3 + .list + h3{ margin: 60px 0 0;}
article p{ margin: 30px 0 0; line-height: 1.75;}
article .right{ text-align: right;}
article p.lead{ margin: 0;}
article dl{ line-height: 1.75;}
article dt{ margin: 30px 0 0; font-weight: 700;}
article dd{ margin: 10px 0 0;}
article table{ width: 100%; line-height: 1.75;}
article th{ padding: 30px 0; width: 150px; border-right: 2px solid #eee; vertical-align: top; text-align: left; white-space: nowrap;}
article td{ padding: 30px 0 30px 45px; vertical-align: top; text-align: left;}
article td .list:first-child{ margin: 0;}
article .cont p:first-child{ margin: 0;}
article .cont .list:first-child{ margin: 0;}
article .cont h3:first-child{ margin: 0;}
article .cont dt:first-child{ margin: 0;}
article .cont ol{ margin: 0 0 0 1em; line-height: 1.75;}
article .cont ol li + li{ margin: .5em 0 0;}
article td p:first-child{ margin: 0;}
article td p + .list{ margin: 15px 0 0;}
article td dt{ margin: 15px 0 0; font-weight: 700;}
article .cont td dt:first-child{ margin: 15px 0 0;}
article .box{ margin: 60px 0 0; padding: 60px; border: 3px double #005049; line-height: 1.75;}
article .box h3{ border-bottom: 1px solid; color: #005049; font-size: 2rem;}
article .box h3:first-child{ margin: 0;}
article .box p{ margin: 15px 0 0;}
article .box ul{ margin: 0 0 0 2.4rem; line-height: 1.75;}
article .box ul li{ margin: 15px 0 0; list-style: disc;}
article .indent{ padding-left: 4.1rem; text-indent: -4.1rem;}
article .indent + .indent{ margin: 10px 0 0;}

@media screen and (max-width: 768px){
    article{ padding: 0 20px 120px; width: 100%; background: url("/img/bg_hero_sp2.jpg") no-repeat bottom center / contain;}
    article header{ margin: 0 -20px; padding: 15px 0; background: #005049;}
    article header h1{ color: #fff; text-align: center; font-size: 2rem;}
    article section{ display: block; margin: 30px 0 0;}
    article h2{ display: block; width: 100%; font-size: 1.6rem;}
    article .cont{ display: block; margin: 15px 0 0; padding: 0; width: 100%;}
    article h2:after{ top: 20px; width: 100%;}
    article h2 span{ padding: 0 20px; height: 40px; line-height: 40px;}
    article h2 div{ margin: 30px 0 0;}
    article h2 figure{ margin: 30px 0 0; width: 100%; text-align: center;}
    article h2 figure img{ width: 50%;}
    article h2 figcaption{ margin: 15px 0 0; font-size: 1.4rem;}
    article h3{ margin: 30px 0 0; font-weight: 700;}
    article h3 + .list{ margin: 15px 0 0;}
    article h3 + .list + h3{ margin: 15px 0 0;}
    article p{ margin: 15px 0 0; line-height: 1.75;}
    article p.lead{ margin: 0;}
    article dl{ line-height: 1.75;}
    article dd{ margin: 10px 0 0;}
    article th{ padding: 15px 0; width: 28%; border-right: 2px solid #eee; vertical-align: top; text-align: left; white-space: nowrap;}
    article td{ padding: 15px 0 15px 15px;}
    article .box{ margin: 30px 0 0; padding: 30px 20px;}
    article .box h3{ font-size: 1.6rem;}
    article .box p{ margin: 15px 0 0;}
    article .box ul{ margin: 0 0 0 2rem;}
    article .box ul li{ margin: 10px 0 0;}
article .indent{ padding-left: 3.6rem; text-indent: -3.6rem;}
}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ background: rgba(255,255,255,.8); color: #005049; text-align: center; font-size: 1.4rem;}
footer{ position: relative; margin: 0 auto; padding: 30px 0; width: 1060px;}
.footer nav ul{ text-align: center; font-size: 0;}
.footer nav li{ display: inline-block; width: 14%; border-right: 1px solid; font-size: 1.4rem; *display: inline; *zoom: 1;}
.footer nav li:first-child{ border-left: 1px solid;}
.footer a{ color: #005049; text-decoration: none;}
.footer a:hover{ text-decoration: underline;}
.footer address{ display: block; margin: 30px 0 0; text-align: left;}
.footer strong{ display: inline-block; padding: 0 15px 0 0; *display: inline; *zoom: 1;}
.footer aside{ display: none;}
.footer small{ position: absolute; right: 0; bottom: 30px; display: block; font-size: 1.4rem;}

@media screen and (max-width: 768px){
    footer{ padding: 15px 20px 0; width: 100%; background: #fff;}
    .footer nav{ display: none;}
    .footer address{ margin: 0; text-align: left; line-height: 1.75;}
    .footer strong{ display: block; padding: 0;}
    .footer aside{ display: block;}
    .footer aside ul{ text-align: left;}
    .footer aside li{ display: inline-block; margin: 10px 0 0; width: 50%; font-size: 1.6rem;}
    .footer aside li:last-child{ width: 100%;}
    .footer aside i{ width: 24px; height: 24px; font-size: 1rem; line-height: 24px !important;}
    .footer small{position: relative; right: auto; bottom: auto;  margin: 15px -20px 0; padding: 10px 0; background: #005049; color: #fff;}
}