@charset "utf-8"; *{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; } img { -ms-interpolation-mode:bicubic; vertical-align:bottom; max-width:100%; height:auto; width:auto\9; touch-callout:none; user-select:none; -webkit-touch-callout:none; -webkit-user-select:none; -moz-touch-callout:none; -moz-user-select:none; } /*-------------------------------------------------------------------------- html ---------------------------------------------------------------------------*/ html{ min-height:100%; overflow-y:scroll; position: relative; } /*-------------------------------------------------------------------------- body ---------------------------------------------------------------------------*/ body{ line-height:1.0; height:100%; background:#fff; color:#333; font-size:14px; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 500; margin-top:70px; } /*-------------------------------------------------------------------------- base link ---------------------------------------------------------------------------*/ a{ outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); transition :0.2s ease-out; -webkit-transition :0.2s ease-out; -moz-transition :0.2s ease-out; cursor :pointer; text-decoration:none; } a:link, a:visited{ color:#FFF; text-decoration: none; } a:hover{ text-decoration:underline; } a:active{ outline:none; text-decoration: none; } /*-------------------------------------------------------------------------- container ---------------------------------------------------------------------------*/ body, #container{ display: flex; flex-direction: column; min-height: 100vh; } /*-------------------------------------------------------------------------- header ---------------------------------------------------------------------------*/ .fixed{ position:fixed; top:0; z-index:9999; } header{ position:relative; top:0; left:0; z-index:1000; width:100%; background:#FFF; } #headerarea{ width:100%; background:#FFF; padding:5px; overflow:hidden; } #header_nav #gnav-btn{ float:right; margin:5px 5px 0 0; } #header_nav #logo{ float:left; margin:15px 10px; } /* メインメニュー */ #gnav-wrap{ display:none; width:100%; position:fixed; top:70px; z-index:100; } #gnav ul{ background:#03213D; } #gnav ul li{ border-top:1px solid #23415D; } #gnav ul li a{ display:block; color:#FFF; text-indent:26px; padding:15px 0; } /* メインメニュー開閉 */ #panel-btn{ display: inline-block; position: relative; width: 44px; height: 44px; } #panel-btn-icon{ display: block; position: absolute; top: 42%; left: 31%; width: 30px; height: 2px; margin: 3px 0 0 -7px; background: #0F6EB3; transition: .2s; } #panel-btn-icon:before, #panel-btn-icon:after{ display: block; content: ""; position: absolute; top: 42%; left: 0; width: 30px; height: 2px; background: #0F6EB3; transition: .3s; } #panel-btn-icon:before{ margin-top: -8px; } #panel-btn-icon:after{ margin-top: 6px; } #panel-btn .close{ background: transparent; } #panel-btn .close:before, #panel-btn .close:after{ margin-top: 0; } #panel-btn .close:before{ transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } #panel-btn .close:after{ transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } /*-------------------------------------------------------------------------- subnav ---------------------------------------------------------------------------*/ #subnav{ background:#0F6EB3; } .subbox h1{ color:#FFF; font-size:18px; font-weight:normal; margin:20px 20px 10px 20px; } .subbox h1 a{ color:#FFF; padding:8px 10px; } .subbox h1 a:hover{ background:#388ED1; text-decoration: none; } .subbox ul{ border-left:1px solid #F0F0F0; margin:10px 0 0 33px; padding-bottom:10px; } .subbox ul li{ display:inline-block; margin-left:10px; margin-top:2px; margin-bottom:2px; } .subbox ul li a{ position:relative; display:block; color:#FFF; padding:12px 10px 12px 22px; } .subbox ul li a:after{ content:''; width:5px; height:5px; border:0px; border-top:solid 1px #FFF; position:absolute; top:50%; left:0; margin-left:10px; } .subbox ul li a:hover, .subbox ul li.on{ background:#388ED1; text-decoration: none; } .pankuzu{ background:#F0F0F0; padding:5px 10px; } .pankuzu ul{ text-align:right; } .pankuzu ul li{ position:relative; display:inline-block; font-size:11px; padding-left:12px; } .pankuzu ul li:after{ content: ''; width: 3px; height: 3px; border: 0px; border-top: solid 1px #999; border-right: solid 1px #999; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 50%; left: 0; margin-top: -2px; } .pankuzu ul li a{ color:#186EB1; } /*-------------------------------------------------------------------------- contents ---------------------------------------------------------------------------*/ #contents{ overflow:hidden; } #contents h2{ position:relative; color:#186EB1; font-size:26px; font-weight:normal; padding-left:50px; margin-top:40px; display:inline-block; } #contents h2:before{ position:absolute; content:" "; border-bottom:solid 1px #186EB1; top:50%; width:40px; display:inline-block; margin-left:-50px; } /* submenu_link */ .submenu_link{ margin-bottom:40px; } .submenu_link ul{ display:flex; justify-content:center; } .submenu_link ul li:first-child{ padding-right:10px; } .submenu_link ul li:nth-child(2){ padding-left:10px; } .submenu_link ul li a{ color:#186EB1; font-size:16px; font-weight:bold; padding:8px 10px; } .submenu_link ul li a{ position:relative; background:#f0f0f0; } .submenu_link ul li.on a:after{ content: ""; position: absolute; right: 0; bottom: -14px; left: 0; width: 0px; height: 0px; margin: auto; border-style: solid; border-color: #25A5D5 transparent transparent transparent; border-width: 8px 8px 8px 8px; } .submenu_link ul li.on a, .submenu_link ul li a:hover{ background:#25A5D5; color:#FFF; } .submenu_link ul li a:hover{ text-decoration:none; } /*-------------------------------------------------------------------------- section ---------------------------------------------------------------------------*/ .section{ font-size:15px; padding:10px; margin:40px 0 60px; overflow:hidden; } .section h3{ position:relative; color:#03213D; font-size:18px; line-height:1.5; } .sec_box h4{ font-size:16px; } .sec_box h4.title_txt{ background:#F0F0F0; padding:6px 12px; margin-top:20px; } .sec_box h5{ font-size:16px; } .sec_box h5.f_mark_y{ position:relative; padding-left:16px; line-height:1.5; } .sec_box h5.f_mark_y:after{ content: ""; position: absolute; top: 50%; left: 0; width: 0px; height: 0px; border-style: solid; border-color: transparent transparent transparent #25A5D5; border-width: 4px 4px 4px 4px; margin-top:-4px; } .sec_box{ line-height:1.5; } .sec_box p.txt{ margin-top:16px; } .sec_box p.intxt{ margin-top:16px; padding:0 10px ; } .sec_box p.txt2{ margin-top:32px; } .sec_box p.right{ text-align:right; } .sec_box p.center{ text-align:center; } .sec_box p.txt_title{ font-weight:bolder; margin: 25px 0; color: #333333; background: #eeeeee; padding: 5px 10px; } .sec_box p.l_space{margin-left:1.5em;} .sec_box p a{color:#004F8C;} /*-------------------------------------------------------------------------- TOPに戻るボタン ---------------------------------------------------------------------------*/ #btnTop{display:none;} /*-------------------------------------------------------------------------- footer ---------------------------------------------------------------------------*/ footer{ margin-top: auto; } .footer_main{ background:#02203E; } .footer_wrap{ padding:10px; } .fnav_main > ul{ display:inline-block; margin:10px; } .fnav_main > ul li{ display:none; } .fnav_main > ul li:first-child{ display:block; } .fnav_main > ul li a{ color:#FFF; } .fnav_main > ul li a{ position: relative; display: inline-block; padding-left: 20px; } .fnav_main > ul li a:before{ content: ''; width: 5px; height: 5px; border: 0px; border-top: solid 1px #FFF; position: absolute; top: 50%; left: 0; margin-top: -4px; } .fnav_main > ul li:first-child a:before{ content: ''; width: 5px; height: 5px; border: 0px; border-top: solid 1px #FFF; border-right: solid 1px #FFF; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 50%; left: 0; margin-top: -4px; } .mark_wrap ul{ text-align:right; } .mark_wrap ul li{ display:inline-block; height:90px; background:#FFF; border-radius: 5px; padding:5px; vertical-align:top; } .fnav_sub > ul li{ display:inline-block; padding:10px; } .fnav_sub > ul li a{ position: relative; display: inline-block; color:#004F8C; font-size:13px; padding-left: 20px; } .fnav_sub > ul li a:before{ content: ''; width: 5px; height: 5px; border: 0px; border-top: solid 1px #CCC; border-right: solid 1px #CCC; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 50%; left: 0; margin-top: -4px; } #copyright{ font-size:12px; text-align:center; padding:10px; line-height:1.5; } /*-------------------------------------------------------------------------- input ---------------------------------------------------------------------------*/ .formbox input[type=text], .formbox input[type=email], .formbox input[type=tel]{ width:100%; margin-left:auto; margin-right:auto; padding:3px 6px; display:inline-block; border:1px solid #ccc; box-sizing:border-box; color:#555; } .formbox textarea{ width:100%; margin-left:auto; margin-right:auto; padding:3px 6px; display:block; border:1px solid #ccc; box-sizing:border-box; color:#555; } .formbox select{ padding:3px 6px; display:inline-block; border:1px solid #ccc; box-sizing:border-box; color:#555; } select::-ms-expand { display: none; } .formbox input[type=text]:focus, .formbox input[type=email]:focus, .formbox input[type=tel]:focus, select:focus, textarea:focus{ border-color:#5f98e1; } /* input type="submit" --------------------------------------------------- */ input[type="submit"] { -webkit-appearance: none; border-radius: 0; } input[type="submit"]{ width:100%; background-color:#084E8A; padding:0.7em 1.25em; border:1px solid #084E8A; border-radius:3px; color:#FFF; font-size:16px; text-align:center; cursor:pointer; } input[type="submit"]:hover{ background-color:#2E6EA8; } /* checkbox ---------------------------------------------------------------- */ input[type="checkbox"]{ margin:0; display:none; } .input_checkbox > p{ display:block; position:relative; padding-left:24px; } .input_checkbox > p label{ display:inline-block; font-size:14px; cursor:pointer; margin-left:5px; } .input_checkbox > p label:before, .input_checkbox > p label:after{ content:""; position:absolute; display:inline-block; transition:transform .2s ease; } .input_checkbox > p label:before{ top:0px; left:0; width:20px; height:20px; border:1px solid #999; border-radius:3px; } .input_checkbox > p label:after{ top:6px; left:5px; width:8px; height:13px; margin-top:-5.5px; border-right:3px solid transparent; border-bottom:3px solid transparent; border-radius:1.5px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); transition:border-bottom-color,border-right-color .2s ease; } .input_checkbox > p input[type="checkbox"]:checked + label:after{ border-color:#5f98e1; } .checkbox_parts{ position:relative; padding-left:20px; } .checkbox_parts::before{ content:""; display:block; position:absolute; top:0; left:0; width:15px; height:15px; border:1px solid #999; border-radius:2px; } .checkbox_input:checked + .checkbox_parts{ color:#0C66B2; } .checkbox_input:checked + .checkbox_parts::after{ content:""; display:block; position:absolute; top:-5px; left:5px; width:7px; height:14px; transform:rotate(40deg); border-bottom:3px solid #0C66B2; border-right:3px solid #0C66B2; } /* checkbox ---------------------------------------------------------------- */ .radio-input{ display:none; } .radio-input + label{ padding-left:20px; position:relative; margin-right:10px; } .radio-input + label::before{ content:""; display:block; position:absolute; top:0; left:0; width:15px; height:15px; border:1px solid#999; border-radius:50%; } .radio-input:checked + label{ color:#009a9a; } .radio-input:checked + label::after{ content:""; display:block; position:absolute; top:3px; left:3px; width:11px; height:11px; background:#186EB1; border-radius:50%; } /*-------------------------------------------------------------------------- setting (共通の設定) ---------------------------------------------------------------------------*/ .mtp1{ margin-top:10px; } .mtp2{ margin-top:20px; } .mtp3{ margin-top:30px; } .mtp4{ margin-top:40px; } .mtp5{ margin-top:50px; } .att{ color:#DD0000; } .clear{ overflow:hidden; } a.pdf:after{ content:url("../images/icon_pdf.gif"); display: inline-block; vertical-align:middle; margin-left:5px; } p.link{ margin-top:15px; } p.link a{ position:relative; padding-right:21px; } p.link a[target="_blank"] { background-image: url(../images/icon_outlink.png); background-size:14px; background-repeat:no-repeat; background-position:right center } /* PC版 ======================================================================= */ @media screen and (min-width:750px) { /*-------------------------------------------------------------------------- PC版body ---------------------------------------------------------------------------*/ body{ margin-top:0px; } /*-------------------------------------------------------------------------- PC版container ---------------------------------------------------------------------------*/ #container{ } /*-------------------------------------------------------------------------- PC版header ---------------------------------------------------------------------------*/ header{ max-width:1000px; padding:0px; margin:0 auto; } #headerarea{ max-width: 1000px; padding:0px; margin:0 auto; } #header_nav{ position:absolute; z-index:100; } #header_nav #gnav-btn{ display:none; } #header_nav #logo{ margin:30px 0 0 10px; } /* メインメニュー */ #gnav-wrap{ position:static; display:block !important; } nav{ width:100%; } #gnav{ display: flex; align-items: flex-start; flex-direction: column-reverse; max-width:1000px; margin:6px auto; } #gnav ul{ display: flex; justify-content: flex-end; align-items: flex-end; width : 85% width : -webkit-calc(100% - 200px) ; width : calc(100% - 200px) ; background:#FFF; margin-left:200px; } #gnav ul li{ text-align:center; border-top:none; } #gnav ul li a{ color:#333; text-indent:0px; padding:10px 0; } #gnav ul.m_nav{ margin-top:10px; } #gnav ul.m_nav li{ position: relative; width:150px; font-size:16px; } #gnav ul.m_nav li.on{ position: relative; } #gnav ul.m_nav li a:hover:before, #gnav ul.m_nav li.on:before{ content: ""; position: absolute; right: 0; bottom: -6px; left: 0; width: 0px; height: 0px; margin: auto; border-style: solid; border-color: transparent transparent #186EB1 transparent; border-width: 6px 6px 6px 6px; } #gnav ul.m_nav li a:hover{ text-decoration:none; } #gnav ul.s_nav li{ position: relative; display: block; font-size:13px; text-align:right; padding-left: 20px; margin-right:15px; } #gnav ul.s_nav li:before{ content: ''; width: 5px; height: 5px; border: 0px; border-top: solid 1px #0F6EB3; border-right: solid 1px #0F6EB3; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 50%; left: 0; margin-top: -4px; } /*-------------------------------------------------------------------------- PC版subnav ---------------------------------------------------------------------------*/ .subbox{ display: flex; align-items: center; justify-content: center; max-width:1000px; margin:0px auto; } .subbox h1{ flex-basis:180px; text-align:center; margin:0; } .subbox ul{ flex-basis:820px; border-right:1px solid #F0F0F0; margin:10px 0 0 10px; padding-left:20px; } .subbox ul li{ min-width:190px; margin-left:0px; } .pankuzu{ padding:15px 10px; } .pankuzu ul{ max-width:1000px; text-align:left; margin-left:auto; margin-right:auto; } .pankuzu_line{ border-top:3px solid #0F6EB3; } /*-------------------------------------------------------------------------- PC版contents ---------------------------------------------------------------------------*/ #contents{ max-width:1000px; min-width:750px; width:100%; text-align:center; margin-left:auto; margin-right:auto; } #contents h2{ font-weight:bold; text-align:center; } /* submenu_link */ .submenu_link ul li a{ font-size:16px; padding:12px 36px; } /*-------------------------------------------------------------------------- section ---------------------------------------------------------------------------*/ .section{ text-align:left; } .section h3{ position:relative; font-size:20px; line-height:1.5; } .sec_box{ } /*-------------------------------------------------------------------------- PC版section ---------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- PC版TOPに戻るボタン ---------------------------------------------------------------------------*/ #btnTop{ display:inline; position:fixed; z-index:3000; bottom:20px; right:20px; } #btnTop a{ width:60px; height:60px; background:#FFF; padding:10px; text-align:center; display:block; position:relative; border-radius:50%; -moz-box-shadow:0 0 5px #aaa; -webkit-box-shadow:0 0 5px #aaa; -moz-opacity:0.8; opacity:0.8; } #btnTop a:after{ content:''; width:16px; height:16px; border:0px; border-left:solid 1px #186EB1; border-top:solid 1px #186EB1; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); position:absolute; top:50%; left:50%; margin-top:-4px; margin-left:-8px; } /*-------------------------------------------------------------------------- PC版footer ---------------------------------------------------------------------------*/ .footer_wrap{ position:relative; max-width:1000px; padding:10px; margin:0 auto; } .fnav_main{ display:flex; justify-content: space-between; } .fnav_main > ul{ margin:10px 0px; } .fnav_main > ul li{ display:block; } .fnav_main > ul li:first-child{ font-size:16px; } .fnav_main > ul li:not(:first-child){ font-size:13px; margin-left:18px; margin-top:14px; } .mark_wrap{ position:absolute; bottom:10px; right:10px; } .fnav_sub > ul li{ padding:10px 15px 10px 0; } /*-------------------------------------------------------------------------- input ---------------------------------------------------------------------------*/ .input_check{ text-align:center; } .input_submit{ text-align:center; } .input_submit input[type="submit"]{ width:300px; } /* PC版 ここまで ======================================================================= */ }