@charset "UTF-8";/*書きミス注意*/ :root{ /*index.htmlのに命令*/ --main-color:#83433E; /*--main-color は変数*/ } /*reset ------------*/ html,body,h1,h2,h3,p,ul,li,dl,dd,dt{ margin:0; padding:0; } ul{ list-style:none; } a{ text-decoration:none; } img{ vertical-align:bottom; } /*.reset*/ header{ width:100%; border-bottom:4px solid var(--main-color); margin-bottom: 40px; } .header-inner{/*変更点*/ width:960px; margin:0 auto; display:flex; justify-content:space-between; } h1{ color:var(--main-color);/*rootの変数を使用*/ font-family: 'Nerko One', cursive; font-size: 40px; } .g-nav{ display:flex;/*横並びにする*/ } .g-nav>li{ height:60px; margin:0 20px; line-height:60px; } .g-nav a{/*孫*/ display:block;/*ブロックにしたほうが面全体にできるので、マウスの配置が広くなる*/ line-height: 60px;/*文字に対して一番近いa要素にしたほうがよい*/ color: var(--main-color); font-weight:bold;/*太字にする　hもともとboldの初期値*/ font-family: 'Nerko One', cursive; font-size:20px; } .g-nav a:hover{/*ボタンの上にマウスがあるよという優しさ*/ text-decoration:underline;/*マウスを置いた時にアンダーラインがでる*/ color:#ffcf03; } main{ width:960px; margin:0 auto 80px; } .main-visual{ margin-bottom: 40px; } .main-txt{ text-align: center; margin-bottom:80px; font-family: 'Nerko One', cursive; } .main-txt>h2{ margin-bottom:40px; font-size:30px; } .lead{ padding:0 100px; } .content-wrapper{ display: flex; justify-content:space-between; margin-bottom: 80px; } .content{ width: calc((960px - 40px) / 3);/*四則演算は前後に半角スペースをいれる。それぞれのサイズを3分割したい*//*calcはカリキュレーション*/ } .content>h3{ border-left:16px solid var(--main-color); font-size:26px; padding-left:20px;/*h3の内側に余白*/ margin-bottom:20px; } .content-img{ margin-bottom:20px; } .content-img>img{/*フルードイメージ　contentのサイズに合わせたサイズに100％合わせる*/ max-width: 100%; } .info-wrapper{ display: flex; justify-content:space-between; } .news{ width:48%; } .map-box{ width:48%; } .map-inner{ height:400px;/*mapの高さはこちらで指定*/ } .g-map{ width:100%; height:100%;/*iframeは絶対１００％*/ } .news dd{ margin-bottom:20px;/*dtとddの情報を分けるために余白を空ける*/ } footer{ width:100%; background-color:var(--main-color); color:#FFF; padding-bottom:10px;/*変更点 footerの内側に余白を増やす。コピーライトが詰まっているので */ } .sns{/*変更点*/ width:960px; margin:0 auto; padding-top:5px; display: flex; } .sns>li{/*変更点　アイコン同士をはなす*/ margin-right:20px; } .fa{/*fontawesomeの略名*/ color:#FFF; font-size:40px; } footer>p{ text-align: center; }