@charset "UTF-8";
/* =============================================
                    COMMON
============================================= */
body{ font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #1d1d1d;}
.en{ font-family: 'Roboto Condensed', sans-serif; font-weight: 700;}
sup{ font-size: 70%; vertical-align: top; position: relative; top: -0.1em;}

/* =============================================
                    CONTENTS
============================================= */
header{ background: #fff; display: flex; align-items: center;}
header .logo-HONMA{ margin-right: auto;}
header img{ width: 100%;}

*{ box-sizing: border-box;}
#contents{ background: url(../img/bg-grid-w.jpg) left top repeat;}
section .tit-box{ position: relative;}
section .tit-box .en{ color: #ebebeb; letter-spacing: -0.02em; position: absolute; top: 0; right: 0;}
section .tit-box h2{ font-weight: 700; line-height: 1.3; color: #0071BE; position: relative; z-index: 1;}
section .btn a{ background: #0071BE; font-weight: 700; text-align: center; text-decoration: none; line-height: 1.3; color: #fff; display: block; border-radius: 10px; box-shadow: 3px 3px 24px rgba(0, 0, 0, 0.25); position: relative;}
section .btn a::after{ content: ''; transform: rotate(45deg); position: absolute;}
#sec01 ul li{ background: #fff; border: 1px solid #000; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);}
#sec01 ul li .stit-box h3{ font-weight: 700; line-height: 1.3; color: #0071BE; text-align: center;}
#sec02 .top{ background: url(../img/bg-dot-y.jpg) left top repeat;}
#sec02 .top .tit-box .en{ color: rgba(255, 255, 255, 0.6);}
#sec02 .top .box{ background: #fff; border: 1px solid #000; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);}
#sec02 .top .box .detail h3{ font-weight: 700; line-height: 1.3; color: #0071BE; display: flex; align-items: center;}
#sec02 .top .box .detail h3::before{ content: ''; background: #0071BE; height: 2px; margin-right: 5px;}
#sec02 nav ul{ display: flex;}
#sec02 ol li .box01 .detail .sbox{ display: flex; position: relative;}
#sec02 ol li .box01 .detail .sbox .en{ font-weight: 700; color: #ffe400; position: absolute;}
#sec02 ol li .box01 .detail .sbox .name h3{ font-weight: 700;}
#sec02 ol li .box01 .detail .sbox .name h3 span{ font-size: 75%;}
#sec02 ol li .box01 .detail .sbox .name .data{ line-height: 1.4;}
#sec02 ol li .box02 .box{ background: #fff; border: 1px solid #000; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);}
#sec02 ol li .box02 .box .detail h3{ font-weight: 700; line-height: 1.3; color: #0071BE; display: flex; align-items: center;}
#sec02 ol li .box02 .box .detail h3::before{ content: ''; background: #0071BE; height: 2px; margin-right: 5px;}
#sec02 ol li .box02 .box .detail p{ font-weight: 700; line-height: 1.4;}
#sec02 ol li .box02 .box .detail table{ width: 100%; border-left: 1px solid #ddd;}
#sec02 ol li .box02 .box .detail table th{ font-weight: 700; text-align: center; border-right: 1px solid #ddd; width: 25%;}
#sec02 ol li .box02 .box .detail table td{ font-weight: 700; color: #dc0000; text-align: center; border-right: 1px solid #ddd; width: 25%;}
#sec02 ol li .box02 .box .detail table td .ja{ font-size: 75%;}
#sec02 ol li .box03{ background: url(../img/bg-dot-y.jpg) left top repeat;}
#sec03 ol li .box01 .balloon{ display: flex; align-items: flex-start;}
#sec03 ol li .box01 .balloon .ico{ margin-right: 10px;}
#sec03 ol li .box01 .balloon p{
	background: #fff;
    color: #000;
	border-style: solid;
	border-width: 4px;
	position: relative;
	border-radius: 6px;
	flex: 1;
}
#sec03 ol li .box01 .balloon p::before,
#sec03 ol li .box01 .balloon p::after{
	content: "";
	position: absolute;
	margin: auto;
	transform: rotate(90deg);
}
#sec03 ol li .box01 .balloon p::before{ 
	top: -4px;
	left: -25px;
	border-style: solid;
    border-color: #000 transparent transparent transparent;
	border-width: 25px 25px 0 0;
}
#sec03 ol li .box01 .balloon p::after{
	top: 0;
	left: -15px;
	border-style: solid;
	border-color: #fff transparent transparent transparent;
	border-width: 20px 20px 0 0;
	z-index: 10;
}
#sec03 ol li .box02{ background: url(../img/bg-stripe-b.jpg) left top repeat;}
#sec04 .top{ background: #fff url(../img/sec04-bg.jpg) center bottom no-repeat; background-size: 100%;}
#sec04 .bottom{ background: url(../img/bg-stripe-g.jpg) left top repeat;}
#sec03 ol li .box02 .btn a{ background: #fff; color: #0071BE;}
#sec05 .box01 ul{ display: flex; flex-wrap: wrap; margin-right: -3px;}
#sec05 .box01 ul li .en{ font-weight: 700; text-align: center;}
#sec05 .box02 h2{ font-weight: 700; color: #000; text-align: center; display: flex; align-items: center;}
#sec05 .box02 h2::before,
#sec05 .box02 h2::after{ background: #000; content: ''; flex-grow: 1; height: 1px;}
#sec05 .box02 h2::before{ margin-right: 15px;}
#sec05 .box02 h2::after{ margin-left: 15px;}
#sec05 .box02 ul li a{ background: #fff; border: 1px solid #000; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2); display: flex; align-items: center; text-decoration: none;}
#sec05 .box02 ul li a p{ color: #000;}
#sec05 .box02 .bnr{ text-align: center;}
#sec05 .box02 .coop{ text-align: center;}
#page-top{ position: fixed; z-index: 90; transition: .4s;}
#page-top.hide{ opacity: 0;}
#page-top a{ display: block;}
footer{ background: #1d1d1d; color: #fff; text-align: center;}
footer a{ color: #fff;}
footer .sns li{ display: inline-block; vertical-align: middle; margin: 0 5px;}
footer .sns li:nth-of-type(2){ vertical-align: top;}

/* ==== PC ===== */
@media screen and (min-width: 768px){
body{ font-size: 16px;}
a:hover,a:hover img{ opacity: 0.8; transition: .4s;}
.pc{ display: block;}
.sp{ display: none;}
.inner{ width: 1046px; margin: 0 auto; position: relative}

header{ padding: 20px 20px 22px;}
header .logo-HONMA{ width: 100px;}
header .logo-GDO{ width: 82px; margin-top: -2px;}
#contents{ overflow: hidden;}
#main{ margin-bottom: 80px;}
#main .mv .inner{ width: 100%;}
#main .mv h1 img{ width: 100%;}
#main .detail{ margin-top: -9%;}
#main .detail p{ font-size: 18px; line-height: 2.0; text-align: right;}
section .tit-box{ padding-top: 50px; margin-bottom: 30px;}
section .tit-box .en{ font-size: 120px;}
section .tit-box h2{ font-size: 60px;}
section .btn{ width: 440px; margin: 0 auto;}
section .btn a{ font-size: 22px; padding: 20px 0;}
section .btn a::after{
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    width: 10px;
    height: 10px;
    right: 20px;
    top: calc(50% - 7px);
}
#sec03 ol li .box02 .btn a::after{
    border-top: solid 2px #0071BE;
    border-right: solid 2px #0071BE;
}
#sec01{ padding-bottom: 100px;}
#sec01 .tit-box{ margin-bottom: 50px;}
#sec01 .box{ display: flex; margin-bottom: 60px;}
#sec01 .box .text{ width: 523px; margin-right: auto;}
#sec01 .box .text p{ font-size: 18px; line-height: 2.0;}
#sec01 .box .text p:first-of-type{ margin-bottom: 20px;}
#sec01 .box .img{ position: relative; z-index: 1; margin-top: -150px;}
#sec01 ul{ display: flex; margin-bottom: 60px;}
#sec01 ul li{ width: 328px; padding: 10px; margin-right: auto;}
#sec01 ul li:last-of-type{ margin-right: 0;}
#sec01 ul li .stit-box h3{ font-size: 20px; margin-top: 10px;}
#sec01 ul li p{ font-size: 16px; line-height: 2.0; padding: 5px 10px 10px;}
#sec02 .top{ padding: 25px 0 60px;}
#sec02 .top .profile{ background: url(../img/sec02-top-profile-bg_pc.jpg) center bottom no-repeat; background-size: cover; padding: 10% 0; margin-bottom: 30px;}
#sec02 .top .read{ font-size: 18px; line-height: 2.0; text-align: center; margin-bottom: 50px;}
#sec02 .top .box{ display: flex; align-items: center; padding: 30px;}
#sec02 .top .box .detail{ width: 493px; margin-right: auto;}
#sec02 .top .box .detail h3{ font-size: 28px; margin-bottom: 10px;}
#sec02 .top .box .detail h3::before{ width: 20px;}
#sec02 .top .box .detail p{ font-size: 16px; line-height: 2.0;}
#sec02 nav{ background: #0071BE;}
#sec02 ol li{ padding-top: 60px;}
#sec02 ol li .box01{ min-height: 493px; margin-bottom: 50px;}
#sec02 ol li .box01 .inner{ display: flex;}
#sec02 ol li .box01 .detail{ width: 523px; }
#sec02 ol li .box01 .detail .sbox{ align-items: center; padding-top: 115px; margin-bottom: 20px;}
#sec02 ol li .box01 .detail .sbox .ico{ margin-right: 30px;}
#sec02 ol li .box01 .detail .sbox .en{ font-size: 118px; top: -10px; right: 0;}
#sec02 ol li .box01 .detail .sbox .name h3{ font-size: 28px; margin-bottom: 10px;}
#sec02 ol li .box01 .detail .sbox .name .data{ font-size: 16px; line-height: 1.4;}
#sec02 ol li .box01 .detail .comment{ font-size: 18px; line-height: 2.0;}
#sec02 ol li .box01 .img01{ position: absolute;}
#sec02 ol li:nth-of-type(1) .box01 .img01{ top: 0; left: 553px;}
#sec02 ol li:nth-of-type(2) .box01 .img01{ top: 0; right: 553px;}
#sec02 ol li:nth-of-type(2) .box01 .detail{ margin-left: 523px;}
#sec02 ol li:nth-of-type(3) .box01 .img01{ top: -15px; left: 553px;}
#sec02 ol li .box02 .box{ display: flex; align-items: center; padding: 30px;}
#sec02 ol li .box02 .box .detail{ width: 493px; margin-right: auto;}
#sec02 ol li .box02 .box .detail h3{ font-size: 28px; margin-bottom: 15px;}
#sec02 ol li .box02 .box .detail h3::before{ width: 20px;}
#sec02 ol li .box02 .box .detail p{ font-size: 14px; margin-bottom: 20px;}
#sec02 ol li .box02 .box .detail table th{ font-size: 14px; padding: 25px 0 5px;}
#sec02 ol li .box02 .box .detail table td{ font-size: 32px; padding: 5px 0 25px;}
#sec02 ol li .box03{ padding: 200px 0 60px; margin-top: -160px;}
#sec02 ol li .box03 .img03{ margin-right: -3px;}
#sec02 ol li .box03 .btn{ margin-top: 40px;}
#sec03 .top{ padding-top: 80px;}
#sec03 .top .img{ margin-bottom: 30px;}
#sec03 .top .img img{ width: 100%;}
#sec03 .top .read{ font-size: 18px; line-height: 2.0; text-align: center;}
#sec03 ol li{ padding-top: 60px;}
#sec03 ol li .box01 .inner{ display: flex;}
#sec03 ol li:nth-of-type(2) .box01 .inner{ flex-flow: row-reverse;}
#sec03 ol li:nth-of-type(2) .box01 .img01{ margin-right: -3px;}
#sec03 ol li .box01 .balloon{ width: 523px;}
#sec03 ol li:nth-of-type(1) .box01 .balloon,
#sec03 ol li:nth-of-type(3) .box01 .balloon{ margin-left: auto;}
#sec03 ol li:nth-of-type(2) .box01 .balloon{ margin-right: auto;}
#sec03 ol li .box01 .balloon p{ font-size: 18px; line-height: 2.0; padding: 15px 25px;}
#sec03 ol li .box02{ padding: 170px 0 60px; margin-top: -130px;}
#sec03 ol li .box02 .btn{ margin-top: 40px;}
#sec04 .top{ padding: 80px 0 56%;}
#sec04 .top .inner > p{ font-size: 18px; line-height: 2.0;}
#sec04 .bottom{ padding: 60px 0;}
#sec05{ padding: 80px 0 100px;}
#sec05 .box01 ul{ margin-bottom: 70px;}
#sec05 .box01 ul li{ width: 250px; margin-right: auto;}
#sec05 .box01 ul li:last-of-type{ margin-right: 0;}
#sec05 .box01 ul li .item{ margin-bottom: 5px;}
#sec05 .box01 ul li .en{ font-size: 24px; margin-bottom: 10px;}
#sec05 .box01 ul li .btn{ width: auto;}
#sec05 .box01 ul li .btn a{ font-size: 18px; padding: 12px;}
#sec05 .box02 h2{ font-size: 42px; margin-bottom: 60px;}
#sec05 .box02 ul{ display: flex; margin-bottom: 80px;}
#sec05 .box02 ul li{ width: 513px; margin-right: auto;}
#sec05 .box02 ul li:last-of-type{ margin-right: 0;}
#sec05 .box02 ul li a{ padding: 20px;}
#sec05 .box02 ul li a p{ font-size: 16px; line-height: 1.4; margin-left: 20px;}
#sec05 .box02 .bnr{ margin-bottom: 40px;}
#sec05 .box02 .coop{ font-size: 16px}
#page-top{ right: 20px; bottom: 20px;}
footer{ padding: 60px 0;}
footer .sns{ margin-bottom: 40px;}
footer .cp{ margin-top: 20px;}
}

/* ==== PC(w1046以下) ===== */
@media screen and (max-width: 1046px){
#main .mv .inner{ width: 1046px; margin: 0 auto;}
#main .detail{ margin-top: -100px;}
#sec02 .top .profile{ width: 1046px; margin: 0 auto;}
#sec03 .top .img{ width: 1046px; margin: 0 auto;}
#sec04 .top{ width: 1046px; margin: 0 auto; padding-bottom: 600px;}
}

/* ==== SP ===== */
@media screen and (max-width: 767px){
body{ font-size: 14px;}
img{ width: 100%;}
.pc{ display: none;}
.sp{ display: block;}

header{ padding: 15px 20px;}
header .logo-HONMA{ width: 54px;}
header .logo-GDO{ width: 44px; margin-top: -2px;}
#main{ margin-bottom: 30px;}
#main .mv .inner{ width: auto; margin: 0 auto;}
#main .detail{ margin-top: 10px;}
#main .detail .inner{ padding: 0 20px;}
#main .detail p{ font-size: 16px; line-height: 1.8;}
section .tit-box{ padding-top: 25px; margin-bottom: 20px;}
section .tit-box .en{ font-size: 50px;}
section .tit-box h2{ font-size: 30px; text-indent: -25px; padding-left: 25px;}
section .btn a{ font-size: 18px; padding: 20px 0;}
section .btn a::after{
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    width: 8px;
    height: 8px;
    right: 20px;
    top: calc(50% - 6px);
}
#sec01{ padding-bottom: 50px;}
#sec01 .inner{ padding: 0 20px;}
#sec01 .box{ margin-bottom: 30px;}
#sec01 .box .text{ margin-bottom: 20px;}
#sec01 .box .text p{ font-size: 16px; line-height: 1.8;}
#sec01 .box .text p:first-of-type{ margin-bottom: 10px;}
#sec01 ul{ margin-bottom: 30px;}
#sec01 ul li{ padding: 10px; margin-bottom: 20px;}
#sec01 ul li:last-of-type{ margin-bottom: 0;}
#sec01 ul li .stit-box{ background: #eee; display: flex; align-items: center;}
#sec01 ul li .stit-box .img{ width: 50%;}
#sec01 ul li .stit-box h3{ width: 50%; font-size: 16px;}
#sec01 ul li p{ font-size: 14px; line-height: 1.8; padding: 10px;}
#sec02 .top{ padding: 30px 0 30px;}
#sec02 .top > .inner{ padding: 0 20px;}
#sec02 .top .profile{ background-size: 100%; width: auto; margin-bottom: 15px;}
#sec02 .top .read{ font-size: 16px; line-height: 1.8; margin-bottom: 25px;}
#sec02 .top .box{ padding: 20px;}
#sec02 .top .box .detail{ margin-bottom: 10px;}
#sec02 .top .box .detail h3{ font-size: 18px; margin-bottom: 10px;}
#sec02 .top .box .detail h3::before{ width: 10px;}
#sec02 .top .box .detail p{ font-size: 14px; line-height: 1.8;}
#sec02 ol li{ padding-top: 30px;}
#sec02 ol li .box01{  margin-bottom: 25px;}
#sec02 ol li .box01 .inner{ padding: 0 20px;}
#sec02 ol li .box01 .detail{ margin-bottom: 20px;}
#sec02 ol li .box01 .detail .sbox{ margin-bottom: 10px;}
#sec02 ol li .box01 .detail .sbox .ico{ width: 40%; margin-right: 15px;}
#sec02 ol li .box01 .detail .sbox .en{ font-size: 44px; top: -10px; right: 0;}
#sec02 ol li .box01 .detail .sbox .name{ padding-top: 40px;}
#sec02 ol li .box01 .detail .sbox .name h3{ font-size: 24px; margin-bottom: 10px;}
#sec02 ol li .box01 .detail .sbox .name .data{ font-size: 14px; line-height: 1.4;}
#sec02 ol li .box01 .detail .comment{ font-size: 16px; line-height: 1.8;}
#sec02 ol li .box01 .img01{ margin: 0 -20px;}
#sec02 ol li .box02 .inner{ padding: 0 20px;}
#sec02 ol li .box02 .box{ padding: 20px; position: relative; z-index: 1;}
#sec02 ol li .box02 .box .detail{ margin-bottom: 20px;}
#sec02 ol li .box02 .box .detail h3{ font-size: 18px; margin-bottom: 10px;}
#sec02 ol li .box02 .box .detail h3::before{ width: 10px;}
#sec02 ol li .box02 .box .detail p{ font-size: 13px; margin-bottom: 15px;}
#sec02 ol li .box02 .box .detail table th{ font-size: 11px; padding: 15px 0 5px;}
#sec02 ol li .box02 .box .detail table td{ font-size: 20px; padding: 5px 0 15px;}
#sec02 ol li .box03{ padding: 210px 0 30px; margin-top: -190px;}
#sec02 ol li .box03 .inner{ padding: 0 20px;}
#sec02 ol li .box03 .img03{ margin-right: -3px;}
#sec02 ol li .box03 .btn{ margin-top: 30px;}
#sec03 .top{ padding-top: 30px;}
#sec03 .top > .inner{ padding: 0 20px;}
#sec03 .top .img{ width: auto; margin-bottom: 15px;}
#sec03 .top .img img{ width: 100%;}
#sec03 .top .read{ font-size: 16px; line-height: 1.8;}
#sec03 ol li{ padding-top: 30px;}
#sec03 ol li .box01 .inner{ padding: 0 20px;}
#sec03 ol li .box01 .img01{ margin: 0 -3px 20px 0;}
#sec03 ol li .box01 .balloon .ico{ width: 20%;}
#sec03 ol li .box01 .balloon p{ font-size: 14px; line-height: 1.8; padding: 10px 15px;}
#sec03 ol li .box02{ padding: 150px 17px 30px 20px; margin-top: -130px;}
#sec03 ol li .box02 .btn{ margin-top: 30px;}
#sec04 .top{ width: auto; padding: 30px 0 220px;}
#sec04 .top .inner{ padding: 0 20px;}
#sec04 .top .inner > p{ font-size: 16px; line-height: 1.8;}
#sec04 .bottom{ padding: 30px 20px;}
#sec05{ padding: 30px 0 50px;}
#sec05 .inner{ padding: 0 20px;}
#sec05 .box01 ul{ margin-bottom: 20px;}
#sec05 .box01 ul li{ width: 48%; margin: 0 4% 8% 0;}
#sec05 .box01 ul li:nth-of-type(even){ margin-right: 0;}
#sec05 .box01 ul li .item{ margin-bottom: 5px;}
#sec05 .box01 ul li .en{ font-size: 18px; margin-bottom: 5px;}
#sec05 .box01 ul li .btn{ width: auto;}
#sec05 .box01 ul li .btn a{ font-size: 13px; padding: 12px;}
#sec05 .box01 ul li .btn a::after{ right: 10px; top: calc(50% - 4px); width: 6px; height: 6px;}
#sec05 .box02 h2{ font-size: 26px; margin-bottom: 30px;}
#sec05 .box02 ul{ margin-bottom: 40px;}
#sec05 .box02 ul li{ margin-bottom: 20px;}
#sec05 .box02 ul li:last-of-type{ margin-bottom: 0;}
#sec05 .box02 ul li a{ padding: 10px;}
#sec05 .box02 ul li a .img{ width: 30%;}
#sec05 .box02 ul li a p{ font-size: 12px; line-height: 1.4; margin-left: 10px;}
#sec05 .box02 .bnr{ margin-bottom: 20px;}
#sec05 .box02 .coop{ font-size: 12px}
#page-top{ right: 10px; bottom: 15px; width: 12%;}
footer{ font-size: 10px; padding: 30px 0;}
footer .sns{ margin-bottom: 20px;}
footer .cp{ margin-top: 10px;}
}