@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=EB+Garamond');
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

/*
■1：ELEMENTS
■2：CLEAR
■3：COMMON
■4：index
■5：Contents
*/

/****************************************

ELEMENTS

*****************************************/
body, html {
  /* important */
  height: 100%;
}

html{font-size: 62.5%; height:100%; overflow-y:scroll;}

body, h1, h2, h3, h4, h5, p, ul, ol, li, form, dl, dd, dt, address {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans JP',YuGothic,'Yu Gothic','Arial','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
	font-weight: normal;
	font-size: 1.4rem;
	line-height: 1.8em;
	color: #000;
	height:100%;
}


body{

}


h1,h2,h3{}

ul, li, dl, dd, dt {
  list-style: none;
}
img, img a {
  border: 0;
  vertical-align: bottom;
  width: 100%;
  box-sizing: border-box;
}
header, footer, nav, section, article, figure, aside, ul, li, dl, dd, dt {
  display: block;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
	text-decoration: none;
	-webkit-transition: all .2s;
	transition: all .2s;
	color: #423615;
}

a:hover{
	text-decoration: none;
	-webkit-transition: all .2s;
	transition: all .2s;
}


/****************************************

COMMON

*****************************************/

.Wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.container {  width: 100%;  display: flex;  flex-wrap: wrap;}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {  width: 100%; margin: 0 0 40px;}
.columnPad{padding: 0 0 0 0;}

@media screen and (min-width:960px){
.container {  width: 100%;  display: flex;  flex-wrap: wrap;}
.col-1 {  width: 8.33%;}
.col-2 {  width: 16.66%;}
.col-3 {  width: 25%;}
.col-4 {  width: 33.33%;}
.col-5 {  width: 41.66%;}
.col-6 {  width: 50%;}
.col-7 {  width: 58.33%;}
.col-8 {  width: 66.66%;}
.col-9 {  width: 75%;}
.col-10 {  width: 83.33%;}
.col-11 {  width: 91.66%;}
.col-12 {  width: 100%;}
.columnPad{padding: 0 60px 0 0;}
}


#head{display: flex; justify-content: space-between;}

.head__btn{display: flex;}
.head__tel,
.head__line{
    padding: 10px;
    height: 80px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.head__tel{background: #0e33bf;}
.head__line{background: #06c655;}

footer{
    background:#e2e2e2;
    text-align: center;
    padding: 40px 0;
}
footer img{max-width:235px;}
.CopyLight{font-size: 1.2rem; margin: 20px 0 0;}
/****************************************

index

*****************************************/
#KV{
    background: url(../img/kv_bg.jpg);
    background-size: cover;
    min-height: 80vh;
}
.KV__title{
    padding: 5%;
    height: 80vh;
    display: flex;
    align-items:flex-end
}
.KV__title img{max-width: 791px;}

#Campaign{
    background: url(../img/section01_bg.jpg) center;
    background-size: cover;
    padding: 30px 5% 30px;
}
#Trouble{
    background: url(../img/section02_bg.jpg) center;
    background-size: cover;
    padding: 5% 5% 0;
}
#Trouble .Wrapper{
    position: relative;
}

.Trouble__btn a{
    background: #ff9000;
    border-radius: 100px;
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform:translateX(-50%);
    max-width: 630px;
    width: 100%;
    padding: 10px;
}
.Trouble__btn a:hover{
    background: #ff6200;
}

#Shop{
    background: url(../img/section03_bg.jpg) center center;
    background-size: cover;
    padding: 15% 5%;
    text-align: center;
}


.Shop__btn{
    position: relative;
	display: inline-block;
    text-align: center;
    background: transparent;
	border-radius: 300px;
    transition: all 0.2s ease;
}

.Shop__btn span {
	position: relative;
	z-index: 2;
	display: block;
    padding: 5% 10%;
    background: #002da6;
	border-radius: 300px;
    transition: all 0.3s ease;
}

.Shop__btn:before {
    content:"";
    position: absolute;
	z-index: 0;
    top:6px;
    left:0;
    width: 100%;
    height: 100%;
	border-radius: 300px;
    background-color: #333;
}
.Shop__btn:hover span {
    background: #002da6;
	transform: translateY(6px);
}

.ShopTxt{
    text-align: center;
    padding: 20px 0 0;
}
.ShopBtn{
    max-width: 700px;
    width: 100%;
    margin: 20px auto;
}

.Section{
    padding: 10% 5%;
}


.h2__title {
    align-items: center;
    display: flex;
    margin: 0 0 40px;
  }

.h2__title p{
    display: inline-block;
    font-size: 2.8rem;
    line-height: 2.8rem;
    font-weight: bold;
    color:#002da6;
    text-align: center;
}
.h2__title span{
    font-size: 1.4rem;
    display: block;
}

  .h2__title::before,
  .h2__title::after {
    background-color: #f2f5ff;
    content: "";
    flex-grow: 1;
    height: 25px;
  }
  .h2__title::before {
    margin-right: 15px;
  }
  .h2__title::after {
    margin-left: 15px;
  }
h3{margin: 0 0 20px; font-size: 2.4rem; font-weight: bold; color:#002da6;}
h3:not(:first-child){ margin: 40px 0 20px;}

.Shop__list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.Shop__list dt{
    width: 25%;
    border-bottom: 1px solid #002da6;
    padding: 5px;
}
.Shop__list dd{
    width: 75%;
    border-bottom: 1px solid #DDD;
    padding: 5px;
}
@media screen and (min-width:1200px){
    body {
        font-size: 1.8rem;
        line-height: 1.8em;
    }
    .head__tel,
    .head__line{
        width: 80px;
    }
    .KV__title{
        padding: 0%;
        height: 80vh;
        display: flex;
        align-items:center;
        justify-content: flex-end;
    }
    #Trouble{padding: 80px 0px 0;}
    #Shop,
    .Section{
        padding: 80px 0px 80px;
    }
}

/****************************************

Contents

*****************************************/