@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
:root {
/*ーーーーーーーーーーーーーーーー
　　　　　pcの設定
ーーーーーーーーーーーーーーーー*/
--pc_nav_height:120px;/*pcのナビの高さ*/
--pc_nav_width:1020px;/*pcのナビの横幅*/
--pc_nav_li1_width:auto;/*pcのナビの中のリストの横幅（float:leftで並ぶようになっている）*/
--pc_nav_li1_height:auto;/*pcのナビの中のリストの高さ*/
--pc_nav_bg:#fff;/*pcのナビの色*/
--pc_nav_dli1_height:50px;/*pcのドロップリストの高さ*/
--pc_nav_dli1_bg:#FF00F5;/*pcのドロップリストの色*/
--pc_header_height:0px;/*pcのヘッダーの高さ*/
--pc_header_bg:#fff;/*pcのヘッダーの色*/
--pc_header_inbox_bg:#fff;/*pcのヘッダーの中のinboxの色*/
--pc_header_inbox_width:1020px;/*pcのヘッダーの中のinboxの横幅*/
/*ーーーーーーーーーーーーーーーー
　　　　　spの設定
ーーーーーーーーーーーーーーーー*/
--sp_nav_header_height:15.625vw;/*spのヘッダーの高さ*/
--sp_header_bg:#fff;/*spのヘッダーの色*/
--sp_btn_width:15.625vw;/*spのメニューボタンの高さ*/
--sp_btn_height:15.625vw;/*spのメニューボタンの横幅*/
--sp_btn_background_open:url(../images/common/images/h_menu_btn1.png);/*spのメニューボタンの開く前の画像（スマホでは画像のURLはCSS変数で読み取れないことがあるので改良の余地あり）*/
--sp_btn_background_close:url(../images/common/images/h_menu_btn2.png);/*spのメニューボタンの開いたときの画像（スマホでは画像のURLはCSS変数で読み取れないことがあるので改良の余地あり）*/
--sp_nav_bg:url(../images/common/images/common2.png);/*spのナビの色*/
--sp_nav_li1_height:15.625vw;/*spのナビの中のリストの高さ*/
--sp_nav_li1_bg:#fff;/*spのナビのリストの色*/
--sp_nav_dli1_height:10vw;/*spのナビの中のドロップリストの高さ*/
--sp_nav_dli1_bg:#fff;/*spのナビの中のドロップリストの色*/
}
*{margin:0px;padding:0px; line-height:1.5;}
body{ position:relative; margin:0; color:#1a1a1a;font-family:'Sawarabi Mincho','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ＭＳ 明朝', 'MS Mincho','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;}
main{width:100%; top:0;}
li{list-style:none;}
a{text-decoration:none;}
img {vertical-align:bottom;border:none;}
.clearfix:after{content:".";visibility:hidden;display:block;height:0px;clear:both;}
.link_div_a{ position:relative; z-index:-10000; height:0;}
.link_div_b{ position:absolute;}
header{ z-index:1000;}
nav {position:relative; z-index:1000;}
.nav_fix_on .nav_in_wrapper{position:fixed; top:0;}
.nav_in_wrapper .d_li1{ overflow:hidden; height:0; transition:all 0.5s ease;}
#h_swich span{position:absolute; right:0;}
.body_close .oc_btn{background:url(../images/common/images/h_menu_btn1.png); background-size:100%;}
.body_open .oc_btn{background:url(../images/common/images/h_menu_btn2.png); background-size:100%;}
.body_close header{left:0;}
.body_close #h_swich{left:calc(100% - 15.625vw);}
.body_close .nav_in_wrapper .nav1{right:-100%;}
.body_open .left_nav #h_swich{left:0;}
.body_close .left_nav{position:absolute; left:0;}
.body_open .left_nav{position:fixed;left:calc(15.625vw - 100%);}
.body_open .left_nav header{left:calc(15.625vw - 100%);}
.body_open .left_nav .nav_in_wrapper .nav1{ right:0; }
.body_open .top_nav #h_swich{right:0;}
.body_close .top_nav{position:absolute; left:0;}
.body_open .top_nav .nav_in_wrapper .nav1{height:calc(100vh - 15.625vw);}


/*ーーーーーーーーーーーーーーーー
PCの時のみ使用するCSS
ーーーーーーーーーーーーーーーー*/
@media screen and (min-width: 769px) {
.pc_none{ display:none;}
body{ min-width:1020px; font-weight:500;font-size:16px;}
.link_div_b{bottom:120px;}
#top_space{ padding-top:120px; width:100%;}
nav{height:0;}
nav .nav_in_wrapper{ height:120px; background:#fff; width:100%; left:0; z-index:100; min-width:1020px; box-shadow:0px 3px 3px rgba(58,57,57,0.3);}
nav .nav_in_wrapper .nav1{margin:auto;}
.nav_fix_off .nav_in_wrapper{bottom:0; position:absolute; }
.nav_fix_on .nav_in_wrapper{top:0;}
#h_swich{ display:none;}
.nav_in_wrapper .nav1{ width:1020px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;}
.nav_in_wrapper .li1{ width:auto; height:auto;}
.nav_in_wrapper .li2{ width:auto; height:auto;}
.nav_in_wrapper .d_li0{height:auto;}
.nav_in_wrapper .d_li1{overflow:hidden; height:0; background:#FF00F5;}
.nav_in_wrapper .drop_list:hover .d_li1{height:50px;}
.d_swich_off{ display:none;}
header{ position:relative; height:0px;}
header .header_wrapper{top:calc(0px - 120px); width:100%; background:#fff;position:absolute;left:50%;-webkit-transform: translate(-50%, -0%);/* Safari用 */transform: translate(-50%, -0%);}
header .header_wrapper h1 img{ height:0px;}
header .header_inbox{max-width:1020px; width:100%;margin:auto; background:#fff;}
.logo{ width:224px;}
.nav_in_wrapper .li3{ width:224px; height:120px;display:flex;align-items: center;justify-content: center;}
.nav_in_wrapper .li3 a{display:flex;align-items: center;}
.nav_in_wrapper .li1{ padding:70px 0 0;}
.nav_in_wrapper .li1 a{display:flex;align-items: center;}
.nav_in_wrapper .li1 a .s1{ color:#fff; font-size:14px;}
.nav_in_wrapper .li1 a .s2{color:#1a1a1a; padding:0; display:inline-block;font-family: 'Noto Sans Japanese','Yu Gothic','メイリオ', Meiryo,sans-serif;}
.nav_in_wrapper .li1 a:hover .s2{ opacity:0.5;}
#c_section1 .box1{ width:100%; height:150px; background:url(../images/common/images/common7.png); margin:0; position:relative;display:flex;align-items: center;justify-content: center;}
#c_section1 .box1 h2{ color:#fff; font-size:30px; font-weight:500; text-indent:0.25em; letter-spacing:0.25em; position:relative; z-index:2;}
footer{ width:100%; background:url(../images/common/images/common2.png); }
footer .box1{ width:84px; margin:auto; height:0; display:block; position:relative;}
footer .box1 a{ width:100%; display:block; position:absolute; bottom:40px; z-index:100;}
footer .box1 a img{ display:block; width:100%; transition:all 0.5s ease;transform:translateY(20px);}
footer .box1 a:hover img{transform:translateY(0px);}
footer .box2{ width:1020px; margin:auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start; text-shadow:1px 1px 1px #fff;}
footer .box2 .leftbox{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center; width:560px; padding:20px 0; font-size:18px;}
footer .box2 .leftbox h3{ padding-bottom:20px; font-size:28px; letter-spacing:0.10em;}
footer .box2 .rightbox{width:460px; padding-top:40px;}
footer .box2 .rightbox li{ padding-left:75px; padding-bottom:10px; font-size:18px;}
footer .box2 .rightbox li a{ color:#1a1a1a; font-family: 'Noto Sans Japanese','Yu Gothic','メイリオ', Meiryo,sans-serif;}
footer .box2 .rightbox li a:hover{ color:#1d2087;}
footer .box2 img{ width:167px;}
#copyright{ text-align:center; padding:5px 0; font-size:12px;}
}

/*ーーーーーーーーーーーーーーーー
spの時のみ使用するCSS
ーーーーーーーーーーーーーーーー*/

@media screen and (max-width: 768px) {
.sp_none{ display:none;}
body{font-size:4.8vw;font-weight:500;}
.link_div_b{bottom:var(--sp_nav_height);}
#top_space{ padding-top:15.625vw; width:100%;}
.d_close .d_swich_on{ height:15.625vw; display:block; width:100%}
.d_close .d_swich_off{display:none;}
.d_open .d_swich_on{display:none;}
.d_open .d_swich_off{ height:15.625vw; display:block; width:100%}
.d_open .d_li1{ height:10vw; background:#fff;}
.d_close .d_li1{ height:0vw;}
.top_nav .nav_in_wrapper .nav1{top:15.625vw;width:100%; height:0;  left:0;}
.left_nav .nav_in_wrapper .nav1{top:0;width:calc(100% - 15.625vw); height:100vh;}
header{ width:100%; position:fixed; top:0; display:block; height:15.625vw; background:#fff;}
header h1 img{ width:41.729.625vw; height:15.625vw;}
header h1 .logo{ width:41.729.625vw; height:15.625vw;}
#h_swich{ display:block;}
#h_swich{ position:fixed; top:0; display:block;width:15.625vw; height:15.625vw;}
#h_swich span{width:15.625vw; height:15.625vw;}
nav{height:0;}
.nav_in_wrapper .nav1{ position:fixed;  background:url(../images/common/images/common2.png); overflow:scroll;border-top:solid 0.5vw #1d2087;}
.nav_in_wrapper .nav1 .li1{ height:15.625vw;background:#fff;}
.nav_in_wrapper .nav1 .li2{ height:auto;background:#fff;}
.nav_in_wrapper .li3{ display:none;}
.nav_in_wrapper .li1 a{display:flex;align-items: center; border-bottom: solid 0.5vw #1d2087; height:calc(100% - 0.5vw);}
.nav_in_wrapper .li1 a .s1{ color:#1d2087;padding:0 0 0 0.5em;}
.nav_in_wrapper .li1 a .s2{color:#1a1a1a; padding:0 0 0 0.5em; display:inline-block;}
#c_section1 .box1{ width:100%; height:30vw; background:url(../images/common/images/common7.png); margin:0;display:flex;align-items: center;justify-content: center; background-size:auto 100%;}
#c_section1 .box1 h2{ color:#fff; font-size:7vw; font-weight:500; text-indent:0.25em; letter-spacing:0.25em;}
footer{ width:100%; background:url(../images/common/images/common2.png); }
footer .box1{ width:30vw; margin:auto; height:0; display:block; position:relative;}
footer .box1 a{ width:100%; display:block; position:absolute; bottom:10vw; z-index:100;}
footer .box1 a img{ display:block; width:100%;}
footer .box2{ width:90%; margin:auto; display:block; text-shadow:0.5vw 0.5vw 0.5vw #fff;}
footer .box2 .leftbox{ display:block; width:100%; padding:10vw 0;}
footer .box2 .leftbox img{ width:50vw; display:block; margin:auto;}
footer .box2 .leftbox h3{ padding:5vw 0; font-size:6vw; text-align:center; letter-spacing:0.10em; text-indent:0.10em;}
footer .box2 .leftbox p{ font-size:5vw;}
footer .box2 .rightbox{width:100%;}
footer .box2 .rightbox li{ border:solid 0.5vw #233587; background:#fff;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center; padding:2vw 5vw; width:calc(100% - 10vw); margin:2vw 0;}
footer .box2 .rightbox li a{ color:#1a1a1a; font-family: 'Noto Sans Japanese','Yu Gothic','メイリオ', Meiryo,sans-serif;}
#copyright{ text-align:center; padding:2vw 0; font-size:4vw; text-shadow:0.5vw 0.5vw 0.5vw #fff;}
}