@charset "utf-8";

/*基本の文字サイズ*/
html{
font-size:20px;
}

@media screen and (max-width:900px){
html{
font-size:17px;
}
}

/*全称セレクタ―*/
*{
margin:0;
padding:0;
box-sizing:border-box;/*paddingは枠線内に収める*/
}


/*全体文字へ*/
body{
font-family:serif;/*明朝体*/
color:#fff;/*文字色を白に*/
}

/*全体のリンク*/
a{
#776F57:bold;
color:#fff;/*文字色も白に*/
text-decoration:none;/*下線なし*/
}

/*全体の画像の位置*/
img{
vertical-align:bottom;
}/*画像は下ぴったりに配置*/

ul{
list-style:none;
}


/*ヘッダー*/
header{
background:rgba(255,255,255,0.5);
width:100%;
height:70px;
display:flex;/*親要素の指定すると、子要素が横並びになる*/
align-items:center;/*子要素を上下センターに置く。display:flex;を指定しておくと使える*/
position:absolute;
top:0;
left:0;
}

header div{
width:100%;/*親要素いっぱいに広がる指定*/
max-width:1400px;/*最大で1400pxまで広がる*/
margin:0 auto;/*(上下 左右) 左右に余白が出たら自動調整*/
padding:0 20px;
}

header img{
width:250px;
}

/*メイン画像*/
#main-pic{
text-align:center;/*インラインの要素を真ん中に配置*/
background:#000;/*画面引き延ばしたときに左右の背景を黒に*/
}

#main-pic img{
width:100%;/*画面いっぱいに表示*/
max-width:1920px;/*1920pxでとめたい*/
max-height:800px;/*高さ固定*/
object-fit:cover;/*縦横比を固定*/
}

/*メディアクエリ*/
@media screen and (max-width:900px){
#main-pic img{
height:100vh;/*上書き部分 画面いっぱいに広がる*/
}
}

/*LINE友だち*/
.line{
background:#776F57;
}

.line div{
max-width:1400px;/*最大幅1400px*/
height:250px;
margin:0 auto;/*表示拡大しても真ん中にくるように*/
padding:0 20px;
display:flex;/*中の箱を横並びに。デフォルト主軸は横*/
justify-content:space-between;/*両端ぞろえ*/
align-items:center;/*上下センター*/
}

.line h2{
font-size:2.3rem;/*基本文字サイズの2.3倍*/
}

.line h2 span{
display:block;/*ブロック形式にする*/
font-size:1.5rem;/*基本文字サイズの1.5倍*/
}

.line a{
border:2px solid #fff;/*2pxの白の線で囲む*/
font-size:2rem;/*基本文字サイズの2倍*/
/*display:block;今回は入れなくてもいいけど、インライン要素の場合は入れたほうがいい。そしてボックスの高さ幅などを指定*/
padding:5px 80px;
transition:opacity 1s;/*変化(opacity)に1秒かける*/
position:relative;

/*ドロップシャドウ*/
/*影:x軸 y軸 ぼかし半径 影の色(r g b 透明度)*/
text-shadow:2px 2px 5px rgba(0,0,0,1);
box-shadow:2px 2px 5px rgba(0,0,0,1);
}

.line a:hover{/*リンクの上に行くと半透明*/
opacity:0.5;
top:-5px;
left:-5px;
box-shadow:4px 4px 5px rgba(0,0,0,1);
}

/*メディアクエリでフォントサイズを変える。
文字がぶつかりそうになるタイミングで*/
@media screen and (max-width:1200px){

.line h2{
font-size:3.5vw;/*ウィンドウの横幅を100としたときの3.5*/
}

.line h2 span{
font-size:2vw;
}

.line a{
font-size:3vw;
}

}

@media screen and (max-width:900px){

.line div{
height:auto;/*高さは内容によって伸縮*/
padding:50px 0;/*上下に余白*/
flex-direction:column;/*縦方向に変えた。主軸は縦へ*/
justify-content:center;/*縦方向の配置を真ん中へ*/
}

.line h2{
margin-bottom:50px;/*aタグはインラインなのでh2に指示*/
text-align:center;
font-size:6.5vw;
}

.line h2 span{
font-size:4.5vw;
}

.line a{
display:block;/*今まではインラインだった*/
padding:5px 0;
width:80%;/*ブロックにしたので横幅が言える。文字は箱の80%*/
text-align:center;
font-size:6vw;
}

}

/*キャッチコピーセクション*/

#catch{
background:#14133A;
padding:200px 0;
}

.c-fb{
max-width:1400px;
margin:0 auto;
padding:0 20px;
display:flex;
align-items:center;

}

.c-fb img{
width:45%;
}

.c-fb div{
width:55%;
padding-left:50px;
}

.c-fb p{
margin-top:30px;
}

#catch h3{
font-size:2.5rem;
}

@media screen and (max-width:1200px){

#catch h3{
font-size:3.5vw;
}

}


@media screen and (max-width:900px){

#catch{
padding:0;
}
.c-fb{
display:block;
padding:0;
}

.c-fb img{
width:100%;
}

.c-fb div{
width:100%;
padding:50px 20px;
}

#catch h3{
font-size:1.3rem;
}
}

/*プロダクトセクション*/
#products{
background:#E6E6E6;
color:#776F57;
padding:100px 0;
}

#products h3{
max-width:1400px;
padding:0 20px;
margin:0 auto;
}

#products h3 span{
display:block;/*インライン要素をぶろっくへ 親要素いっぱいに広がる*/
border-bottom:2px solid #776F57;
font-size:2rem;
}

#products ul{
max-width:1400px;
margin:0 auto;
display:flex;
}

#products li{
padding-top:100px;
width:50%;
text-align:center;/*インライン用や文字を真ん中に*/
}

#products h4{
font-size:1.7rem;
margin-top:100px;
}

#products p{
font-size:1rem;
}

#products a{
display:block;/*インライン要素をブロックに*/
margin:30px auto 0;
background:#776F57;
font-size:1.5rem;
width:250px;
height:60px;
line-height:60px;
/*padding:10px 0;パディングで設定してもOK*/

/*ボックスの角丸の半径*/
border-radius:100px;
}

@media screen and (max-width:900px){
#products ul{
display:block;
}


#products li{
width:100%;
}

#products img{
width:70%;
max-width:336px;/*最大元画像のサイズまで*/
}

#products h4{
margin-top:10px;
}
}

/* クローズ画像セクション */

#close-pic{
background:#000;
text-align:center;
}

#close-pic img{
width:100%;
height:500px;
max-width:1920px;
object-fit:cover;
object-position:30% 50%;/*x軸 y軸*/
}

footer{
background:#14133A;
text-align:center;
padding-top:200px;
}

footer img{
width:300px;
}

footer ul{
margin:100px 0 200px 0;
}

footer li{
margin-bottom:20px;
}
footer p{
background:#776F57;
}