@charset "utf-8";

/* =reset
------------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,header, section, article, footer, article, aside, time ,nav,a{
margin:0;
padding:0;
}

fieldset,img{
  border:0;
}
address,caption,cite,code,dfn,em,th,var{
font-style:normal;
font-weight:normal;
}
ol,ul{
list-style:none;
}
caption,th{
text-align:left;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
q:before,q:after{
content:'';
}
abbr,acronym{
border:0;
}
p{
text-justify:inter-ideograph;
margin: 0;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}

header, section, article, footer, article, aside, time ,nav { display: block; }

ul{
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;
}
figure {
display: block;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}

button{
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}

/* =base
------------------------------------------------------------------------------------------*/
* { box-sizing: border-box; }
body { background: #fff; color: #fff; counter-reset: number 0; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-feature-settings : "palt"; font-size: 14px; font-weight: 500; line-height: 1.6em; }
img { vertical-align: bottom; }
a,
a:hover { text-decoration: none; outline: none; }
a:hover img { opacity: 0.8; filter: alpha(opacity=80); }

/* =header
------------------------------------------------------------------------------------------*/
header .header-wrap { margin: 0 auto; padding: 20px 0 14px; width: 92%; max-width: 1000px; }
header .header-wrap h1.logo { margin-right: 12px; width: 40%; max-width: 200px; }
header .header-wrap h1.logo a { display: block; }
header .header-wrap h1.logo a img { width: 100%; }

.main-wrap { display: block; margin: 0 auto; padding-bottom: 3vw; position: relative; width: 100%; max-width: 1000px; padding-top: 4vw; }
.main-wrap .inner-wrap { margin: 0 auto; width: 92%; }
.main-wrap .inner-wrap p { color: #000; font-size: 18px; font-weight: 600; line-height: 1.8em; margin-bottom: 1em; text-align: center; }
.main-wrap .inner-wrap h2 { color: #f27900; font-family: "Pathway Gothic One","メイリオ","Meiryo","MS PGothic","Osaka",Arial,sans-serif; font-size: 96px; margin-bottom: .3em; font-weight: bold; letter-spacing: .1px; line-height: 1em; text-align: center; }

.font-bold { font-weight: bold !important; }
.text-red { color: #cc0000 !important; }
.less { font-size: .8em !important; }

.flex-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; width: 102%; }
.flex-box a { display: block; transition: .15s; }
.flex-box a:hover { opacity: .8; }
.flex-box .box01 { margin: 0 auto 2%; border: 1px solid; border-top: 4px solid; border-color: transparent #ddd #ddd #ddd; padding: 15px 20px; width: 51%; }
.flex-box .box02 { flex-grow: 1; flex-basis: 48%; flex-shrink: 0; max-width: 48%; margin: 0 2% 2% 0; border: 1px solid; border-top: 4px solid; border-color: transparent #ddd #ddd #ddd; padding: 15px 20px; }
.flex-box .box01#gsm { border-top-color: #242424; }
.flex-box .box02#gold { border-top-color: #968313; }
.flex-box .box02#silver { border-top-color: #4e6a7d; }
.flex-box .box02#bronze { border-top-color: #a33a30; }
.flex-box .box02#bronze-jcb { border-top-color: #a33a30; }
.flex-box .box02#kids { border-top-color: #71a320; }
.flex-box .box02#gid,
.flex-box .box02#gid-jcb { border-top: 1px solid #ddd; }
.flex-box .box01 .inner-box,
.flex-box .box02 .inner-box { padding: 20px 0 10px 120px; position: relative; }
.flex-box .box02#bronze .inner-box { padding-top: 44px; }
.flex-box .box02#gid .inner-box,
.flex-box .box02#gid-jcb .inner-box { padding: 20px; }
.flex-box .box01 .inner-box::before,
.flex-box .box02 .inner-box::before { content: ""; position: absolute; top: 50%; left: 0; transform: translate3d(0,-50%,0); width: 100px; height: 100px; }
.flex-box .box01#gsm .inner-box::before { background: url(../images/icon_gsm.png) center center no-repeat; background-size: contain; }
.flex-box .box02#gold .inner-box::before { background: url(../images/icon_gold.png) center center no-repeat; background-size: contain; }
.flex-box .box02#silver .inner-box::before { background: url(../images/icon_silver.png) center center no-repeat; background-size: contain; }
.flex-box .box02#bronze .inner-box::before { background: url(../images/icon_bronze.png) center center no-repeat; background-size: contain; }
.flex-box .box02#bronze .inner-box h3,
.flex-box .box02#bronze .inner-box p { position: relative; top: -12px; }
.flex-box .box02#bronze-jcb .inner-box::before { background: url(../images/icon_bronze.png) center center no-repeat; background-size: contain; }
.flex-box .box02#kids .inner-box::before { background: url(../images/icon_kids.png) center center no-repeat; background-size: contain; }

.flex-box .inner-box h3 { color: #333; font-family: "Pathway Gothic One","メイリオ","Meiryo","MS PGothic","Osaka",Arial,sans-serif; font-size: 38px; letter-spacing: .1px; font-weight: bold; line-height: 1em; margin-bottom: .1em; }
.flex-box .inner-box p { color: #333; text-align: left; margin-bottom: 0; font-size: 16px; line-height: 1.6em; }

@media screen and (max-width: 768px){
.main-wrap { padding-bottom: 7vw; } 
.main-wrap .inner-wrap p { font-size: 16px; text-align: left; }
.main-wrap .inner-wrap h2 { font-size: 13vw; letter-spacing: 0; }
.flex-box { width: 100%; }
.flex-box .box01,
.flex-box .box02 { flex-basis: 100%; width: 100%; max-width: 100%; }
.flex-box .box01 .inner-box::before,
.flex-box .box02 .inner-box::before { width: 90px; height: 90px; }
.flex-box .box02 .inner-box { padding: 20px 0 10px 110px; }
.flex-box .box02#bronze .inner-box { padding-top: 20px; }
.flex-box .inner-box h3 { font-size: 28px; }
.flex-box .box02#bronze .inner-box h3,
.flex-box .box02#bronze .inner-box p { position: relative; top: 0; }
}