@charset "UTF-8";

body {
   background: #fff;
   font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
   font-weight: 400;
   margin: 0;
}

.contentWrap {
}

section {
   max-width: 640px;
   width: 100%;
   margin: 0 auto;
   padding: 0;
}
.w90 {
   width: 90%;
   margin-left: 5%;
}
h2 {
   text-align: center;
   font-size: 2rem ;
   color: #fff;
   line-height: 1.4;
}
h2 span {
   font-weight: 900;
}
h2 span big {
   font-size: 2.4rem;
}
h3 {
   text-align: center;
   font-size: 2rem ;
   color: #555;
   line-height: 1.4;
   padding: 1.2em 0 !important;
}
h3 b {
   font-weight: 900;
}
h3 .green {
   font-size: 2.3rem;
}
h3 .blue {
   font-size: 2rem;
}
.green {
   color: #779549;
}
.blue {
   color: #0075ba;
}
.cap {
   font-size: 1.1rem;
   line-height: 1.4;
   color: #555;
   padding: 0.8em 0;
}

/***********************************
導入
*************************************/
.intro {
   position: relative;
   padding: 1.5em 0 1em;
}
.intro h3 {
   text-align: left;
   padding: 0 !important;
   letter-spacing: -0.01em;
   font-size: 2.8rem;
}
.intro h3 .green {
   font-size: 2.8rem;
}
.intro h3 big {
   font-size: 3.5rem;
}
.intro .header-logo {
   position: absolute;
   right: 0;
   top: 0;
   width: 22.5%;
}
.hero {
   position: relative;
}
.hero .header-copy {
   background: #779549;
   color: #fff;
   padding: 0.4em 0.7em !important;
   font-size: 2.0rem;
   font-weight: 900;
   text-align: right;
}
.hero .header-item {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 40%;
}
h1 {
   text-align: left;
   font-size: 2.0rem;
}

/***********************************
繰り返し　初回割引
*************************************/
.benefits span {
   color: #eb671f;
   font-weight: bolder;
   font-size: 2.2rem;
   line-height: 1;
   letter-spacing: 0.05em;
}
.benefits big {
   font-size: 150%;
}

/***********************************
物販
*************************************/
.sales {
   padding-bottom: 40px;
}
.sales .product .name {
   text-align: center;
   font-size: 2.2rem;
   font-weight: 700;
   line-height: 1.4;
}
.sales .product .price {
   text-align: center;
   font-size: 2.2rem;
   font-weight: 700;
}
.sales .product .price span {
   font-size: 1.6rem;
   font-weight: 500;
}
.sales ul {
   width: 300px;
   margin: 1.5em auto 40px;
   display: flex;
   align-items: center;
}
.sales ul li {
   border: 2px solid #666;
   height: 60px;
}
.sales ul li:nth-child(2) {
   width: 204px;
   border-color: #aaa;
   border-left: none;
   border-right: none;
}
.sales ul li:first-child {
   width: 48px;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
}
.sales ul li:last-child {
   width: 48px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
}
.sales .submit p {
   background: #1f497d;
   font-size: 2rem;
   color: #fff;
   line-height: 50px;
   border-radius: 10px;
   width: 280px;
   margin: 0 auto;
   text-align: center;
}

/***********************************
contents03
*************************************/
.color-bg {
   background: #e1eaf2;
   padding: 1em 0 0;
}
.color-bg ul {
   background: #fff;
   display: flex;
   align-items: center;
   margin-bottom: 1em;
   box-shadow: 3px 3px 4px rgba(0,0,0,0.3);
}
#contents03 .color-bg ul li:first-child {
   width: 23%;
   padding: 5px;
   margin-right: 10px;
}
#contents03 .color-bg ul li p {
   font-size: 4.5vw;
   color: #444;
   font-weight: 700;
   line-height: 1.4;
}
#contents03 .last-item {
   position: relative;
}
#contents03 .last-item p {
   position: absolute;
   left: 0;
   bottom: 0;
   padding-left: 1em;
   color: #0075b7;
   line-height: 1.2;
}
#contents03 .last-item+p {
   padding: 0.65em 1em 1.2em;
   color: #0075b7;
   line-height: 1.2;
   border-bottom: solid thin #ccc;
}

/***********************************
contents04
*************************************/
#contents04 .color-bg {
   background-image: url("../images/img_bg01.png");
   background-position: center top;
   background-repeat: no-repeat;
   background-size: contain;
   padding: 2em 0 1em;
}
#contents04 h5 {
   font-size: 2.2rem;
   line-height: 1.4;
   color: #555;
   text-align: center;
   margin-bottom: 0.65em;
}
#contents04 ul li {
   margin: 0 auto;
}
#contents04 ul li h3 {
   padding: 0.4em 0 !important;
}

/***********************************
closing
*************************************/
#closing .bnr {
   padding: 1.4em 0;
}
#closing .bg-blue {
   background: #0060a4;
   text-align: center;
   padding: 0.4em 0;
}
#closing .bg-light {
   background: #d3d7e8;
}
#closing .bg-blue p {
   font-size: 2.0rem;
   color: #fff;
   line-height: 1.4;
   padding: 0.5em 0;
}
#closing .bg-blue p span {
   font-weight: 900;
}
#closing .bg-blue p span big {
   font-size: 2.4rem;
}
#closing .sns ul {
   display: flex;
   align-items: center;
   justify-content: center;
}
#closing .sns ul li {
   width: 85px;
   padding: 15px;
}
#closing .sns .bg-blue p {
   font-size: 1.6rem;
}
#closing .sns .bg-light p {
   font-size: 1.6rem;
   color: #0060a4;
   line-height: 1.4;
   padding: 0.5em 0;
   text-align: center;
}


.footer {
   width: 100%;
   text-align: center;
   padding-top: 1em;
   font-family: "Noto Sans JP";
}
.footer .container div {
   width: 50%;
   max-width: 280px;
   margin: 0 auto 1em;
}
.footer .menu {
   line-height: 2;
}
.footer .menu a {
   font-size: 1.3rem;
   color: #000;
   margin: 0;
   border-left: solid thin #555;
   padding: 0 0.65em;
}
.footer .menu a:first-child {
   padding-left: 0.8em;
}
.footer .menu a:nth-child(3),
.footer .menu a:last-child {
   border-right: solid thin #555;
}
.footer .copyright {
   font-size: 1.2rem;
   padding: 0.7em 0 2em;
   border-top: solid thin #000;
   margin: 1.5em 3% 0;
}




/* =============================================================================================
	SP only　スタイル
 ============================================================================================= */
@media screen and  ( max-width:640px) { 
   .hide_sp {
      display: none;
   }
}

/* =============================================================================================
	PC　スタイル
 ============================================================================================= */
@media screen and  ( min-width:641px) { 
   .hide_pc {
      display: none;
   }
   
#contents03 .color-bg ul li p {
   font-size: 3rem;
}
   
}