@charset "UTF-8";
/* CSS Document */

body{
font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans", Meiryo, "sans-serif";
font-size:14px;
color:#000000;
letter-spacing: 0.2em;
min-width:1000px;/*これやっとくとproductのところの画像みたいなところでへんに画像がはみだしてこない、最小の幅を決めておく*/
}


#header_area{
width: 100%;
height:82px;
background-color: #FFFFFF;
box-shadow: 0px 6px 6px #00000015;/*済_きかないなんで→pxのあとにカンマがあったから*/
position:fixed;/*メモここで固定してるよ*/
z-index: 9999;/*済_固定するとmainのほうがあとにきているのでz-indexでよびもどしているの？？？？→そういうこと*/
}
header{/*済_なぜ下にちょっと隙間あるの→高さは親タグいっぱいになるのではない、h1とnavの高さ+padding-topで高さ取った分が高さになる*/
width:1000px;
margin:0 auto;/*済_きかないなんで→position:fixed;するときかなくなるけど、header_areaで100%をかいてあげるときく*/
display:flex;/*済_横並びにならない→header nav ulでかけると横に並んだなんでここでdisplay:flex;かけた？？→logoと*/
justify-content:space-between;/*メモこれやるとnavが一番右に行ってくれる*/
}

header h1{
width:57px;
padding-top:24px;/*済_なぜmarginではなくpaddingしかもpadding-topなの？デフォルトがheaderいっぱいだからpaddingなのかも→原理はよくわからんけど、h1とかnavをmarginでとると、つきぬけて変なことになるのでpaddingでとってあげる*/
}

header nav{
width:583px;
padding-top:27px;
}

header nav ul{
display: flex;
justify-content: space-between;
font-size:9px;
}

header nav ul li{
text-align: center;
background-color:rgba(237,227,255,0.00);
transition:background-color 0.3s;
position: relative;
}

header nav ul li::after{
content: "";
display: block;
position: absolute;
left:0;
bottom: 0;
background: #EDE3FF;
height: 5px;
width:0%;
margin:-6px auto 0;
transition:width 0.3s;
z-index: -9999;
}

header nav ul li:hover::after{
width:100%;
}


/*header nav ul li:hover{
background-color:rgba(237, 227, 255, 1.00);
}*/

/*画像がもともと持つ幅に依存しないほうがいいちゃんとかくnav1の幅とか*/
.nav_03 img,.nav_05 img{
margin-bottom: 4px;/*画像とテキストのくくりなのできく画像とボックスだったらきかんかも、imgじゃないボックスにmarginかけるとうまくいかん文字までマージンつく*/
}

header nav a{
color: #000000;/*メモリンククリックするとデフォルトで色が変わる設定があるのでそれを消すためのカラー*/
}
#top{
padding:82px 0 120px;/*済_なんか全部あがってきた→さっきはheightだったので*/
position:relative;/*afterでかいたposition:absolute;では絶対配置なのでウィンドウを広げるとくっついてきてしまうposition:relative;でくっついてこないようにする基準にしたいものにpositon:relative;をかける*/
}
#top p{
line-height: 0;/*画像もテキストなので勝手に行間できる、なので行間消してあげる*/
}

#top p img{/*済_なんで#top pじゃだめ？→箱にしかかからない画像の大きさは変わってくれないので*/
width:100%;
height:auto;/*メモ高さをautoにしてあげることでもともと持っている比率を保持してくれる*/
}

#top::after{
content: "";
display: block;
width: 1px;
height: 180px;
background: #000;/*済_background-colorでないのはなぜ→background-colorの類をまとめたものなので他にも位置とかもかける*/
position:absolute;
left: 50%;/*メモ位置まんなかにすることで画面を大きくしても基準が変わらない*/
margin-left:-500px;/*メモ-マージンなのでくいこむ*/
bottom:-40px;/*済_これどこのこと？→棒が上らへんにあったので下に下げるために使った、位置指定するやつはabsolute使ってないと使えない。マージンボトムをまだ使ってないのでマージンボトムでもOK*/
}





#concept{/*済_なぜ#topでmargin-bottomにしないのか？→#conceptにとんだときに、はじまりがConceptの文字ぎりぎりになるのと固定のヘッダーがあるので、見えなくなるので#conceptでpadding-topをとってあげる*/
padding:122px 0 108px;/*本当は下マージンは138pxだが、#concept .con_textでmargin-bottom:30px;とっているので138px-30pxで108px*/
width: 1000px;
margin: 0 auto;
}

#concept .title{
margin-bottom:133px;
}

#concept .title img{
width:390px;/*メモh1のときはnavとflexで横並びにしなければならないので箱に横幅つけてimgを100%にしたが、ここでは、まわりになにもないのでimgに普通に横幅つけた*/
height:auto;
}
#concept h2{
font-family: "Hiragino Mincho ProN", YuMincho, "Yu Mincho", "serif";
text-align: center;/*ここはなぜmargin:0 auto;で真ん中にできないのか→widthがないから*/
font-size: 20px;
margin-bottom: 101px;
}

#concept h2{
position: relative;/*メモ左に少し寄せたかったので、leftつかったけどleftつかうにはposition:relativeがないと機能しない*/
left:-5px;/*きいてない*/
}

#concept h2::after{
content: "";
display: block;
background: #EDE3FF;
width:290px;
height: 13px;
margin:-15px auto 0;/*テキストではないのでtext-alignがつかえない？これなくすと→変になる中身ががないからできない*/
}

#concept .bottle{
margin-bottom: -110px;/*画像にmarginつけないのはなぜ、上ではつけてるのに→基本画像にmarginはつけない*/
}
#concept .bottle img{
width: 100%;
height:auto;/*メモもともとXDで書き出したので大きさは書かなくてもぴったりだけど一応かいとく*/
}
#concept .con_text{
line-height: 2.1;
text-align: center;
margin-bottom: 30px;
}
#concept::after{
content: "";
display:block;
width:1px;
height:145px;
background: #000000;
position: absolute;
right:50%;
margin-right: -500px;/*済_右に行かないなんで→left50%だったので左から50%とれよっていう意味なので左に圧力かかってた*/
}




#product{
padding-top:137px;/*済_なぜ#productに高さや幅の設定がないのにpaddingがつけられるのか→paddingは決められた余白をとれっていうものなのでwidthやheightいらん*/
position: relative;
}

#product .pro_logo{
width:1000px;
text-align: right;
margin: 0 auto 51px;
}

#product.pro_logo img{
width:367px;
height:auto;
}

#product .pro_img{
width:50%;
height:911px;
position: absolute;
right:0;
}

#product .pro_img img{
object-fit: cover;
width:100%;/*メモ高さと幅をimgにもつけないとobject-fit:cover;がきかない*/
height:100%;
}

#product .pro_title{
width:1000px;
margin:0 auto 40px;
font-family:  "Hiragino Mincho ProN",YuMincho, "Yu Mincho", "serif";
font-size:24px;
line-height: 1.875;/*1000pxになってない*/
padding-top:137px;
}

#product h2 .pro_text{
background: linear-gradient(transparent 50%, #EDE3FF 50%);
}/*うまくいかん*/

#product .pro_text2{
width:412px;
margin:0 auto 72px;
padding-right: 588px;
text-align: justify;
}

#product ul{
width:412px;
margin:0 auto 195px;
display:flex;
flex-wrap: wrap;/*メモ入り切らないやつはしたにいってくれる*/
justify-content: space-between;
padding-right:588px;
}


#product li{
width:160px;
margin-bottom: 40px;
}

#product li .pro_img_bb{
width:66px;
margin:0 auto 16px;/*メモimgにmarginをつけるのではなく、classつけてそこにmarginつけたらうまくいった*/
text-align: center;
}
#product li img {
width:100%;
height:auto;
}

#product li h3{
width:115px;
padding-bottom: 10px;
margin:0 auto 13px;/*メモテキスト真ん中にきていない？→text align追加したら真ん中にきた*/
border-bottom: solid;
text-align: center;
letter-spacing: 0;
}

#product li p{
font-size: 14px;
letter-spacing: 0;
}

#product .pro_text3{
width:490px;
height:132px;
margin: 0 auto;
font-size: 16px;
text-align: center;
line-height: 2;
}

.back_wrap{
background: url("../images/product_group.png") center center/cover no-repeat;
width:100%;
height: 68.5vw;
position: relative;
margin-bottom: 31px;
}

.text_wrap{
width:267px;
position: absolute;
right: 11%;
padding-top:30vw;
}
/*今から線をつくっていく*/
.back_wrap::after{
content: "";
display:block;
background-color: #000;
width:1px;
height:190px;
position:absolute;
left:50%;
margin-left: -350px;
bottom:-135px;
transform: rotate(65deg);
}


#product .pro_title2{
width:255px;
font-size:24px;
font-family:"Hiragino Mincho ProN", YuMincho,  "Yu Mincho","serif";
background: linear-gradient(transparent 50%, #EDE3FF 50%);
margin-bottom: 24px;
}

#product .pro_title3{/*メモspanにはmarginかからない、h2ここでは.pro_title3にmarginをかける*/
width:255px;
margin-bottom: 48px;
line-height:2;
}

#product .pro_text4{
text-align: justify;
}

#topics{
background: #EDE3FF;
border-radius: 0px 120px 0px 0px;
padding: 100px 0 218px;
}


#topics .topi_title{
width:1000px;
margin: 0 auto 78px;
}

#topics .topi_img{
width:1000px;
height:309px;
margin:0 auto;
}

#topics .topi_wrap{
width:830px;
margin:0 auto 157px;
display: flex;
justify-content: space-between;
}

#topics .topi_wrap>p{
width:415px;
margin-right: 95px;
}

#topics .topi_wrap .topi_text{
width:330px;
height:309px;
padding-top:19px;
}

#topics .topi_wrap .topi_text .day{
width:110px;
height:14px;
margin-bottom: 10px;
}

#topics .topi_wrap .topi_text h2{
font-family: "Hiragino Mincho ProN",YuMincho, "Yu Mincho",  "serif";
letter-spacing:0;
font-size: 30px;
width:330px;
margin:0 auto 44px;/*行間が若干きいているのでtopは12ではなく10*/
}

#topics　.topi_text .topi_disc{
width:320px;
text-align: justify;/*これをするとつらをあわせられるのにならない*/
line-height:1.7;
letter-spacing:0;
}

#topics h3{
text-align: center;
}

#topics h3 img{
width:120px;
height:auto;
margin-bottom:12px;/*画像にmarginをつけるとボッスも一緒にふくらむ？なぜh3ではなくimgにマージンをつけた*/
}

#topics .shop_name{
text-align: center;
}

#topics .shop_name img{
width:210px;
height:auto;
margin-bottom:60px;
}
/*なぜかshop_nameにwidth:210px;margin:0 auto;をつけてimgのwidth:100%height:autoのやりかたでは真ん中にきてくれなかった*/

#topics .topi_account{
width:1000px;
margin:0 auto 23px;
display: flex;
}

#topics .topi_account .account_icon{
width:65px;
height:45px;/*メモpadding-topを20追加したので65-20=45px*/
background: #FFF;
text-align: center;
padding-top:20px;
border-radius:33px; /*border-radiusは半径という意味なのでwidthの半分以上の数値つけるとまるくなる*/
margin-right:35px; 
}
#topics .topi_account .account_icon img{
width:46px;
height: auto;
}

#topics .topi_account .account_text{
width:220px;
padding-top:22px;
font-size:16px;
letter-spacing: 0;
font-weight: 700;
}
#topics ul{/*topicsにpaddingで紫の余白をとる。ここにmarginで余白とってもふえない*/
width:1000px;
margin:0 auto;
display: flex;
justify-content:space-between;
position: relative;
}
#topics ul li{
width:235px;
}
#topics ul li img{
width:100%;
height:auto;
}

#topics ul::after{
content:"";
display:block;
width:1px;
height:190px;
transform: rotate(-65deg);
background: #000;
position: absolute;
right: 50%;
margin-right:-330px;
bottom:-320px;
}

#store{/*storeにwidth:1000pxじゃだめなのかいい*/
padding-bottom:160px;
}

#store .store_title{
width:1000px;
margin:0 auto 73px;
text-align: right;
padding-top: 83px;
}

#store .store_title img{
width:240px;
height:auto;
}

#store ul{
width:1000px;
margin:0 auto;
display: flex;
justify-content: space-between;
}

#store ul li{
width:320px;
}

#store .store_img{
width:320px;
margin-bottom: 29px;
}

#store .store_img img{
width:100%;
height:auto;
}

#store .store_text{
width:320px;
border: 1px solid #000;/*border: 線の太さ, 線の種類, 線の色 ;*/
margin-bottom: 32px;
text-align: center;
padding:10px 0;
letter-spacing: 0;
}

#store .store_text h3{
letter-spacing: 0;
font-family: "Hiragino Mincho ProN", YuMincho, "Yu Mincho", "serif";
font-size: 20px;
/*text-align: center;/*なぜmargin0 autoじゃだめ？text-alignのほうがいい箱のwidthいらないから*/
	/*margin0 autoはwidthないといけないがmargin自体はかける*/
line-height:1.3;
}

#store .store_text p{
font-size:8px;/*きいてない*/
/*text-align: center;/なぜかここにtext-align:centerかけてもきかない*/
}

#store ul li dt{
width:80px;
text-align: right;
}

#store ul li dd{
width:240px;
text-align: left;
}

#store ul li dl{
width:320px;
letter-spacing: 0;
display: flex;
flex-wrap: wrap;/*メモ二段以上になるので、くりかえすときはこれがいる*/
line-height:1.8;/*メモdtとddにそれぞれmargin-bottomかけるでもよい*/
}

footer{
height:12px;/*メモ高さ66pxだが、paddingを上下にとったので66-54=12*/
font-size: 10px;
letter-spacing: 0;
padding:27px 0;
text-align: center;
}