/*-------------------------------------リセットcss-----------------------------*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } html,body,div,span,iframe,h1,h2,h3,h4,h5,p,a,img,ul,li,table,tr,th,td,tbody,footer,header,main,nav,section { margin: 0; padding: 0; border: 0; font-weight: normal; list-style: none; text-decoration: none; } /*---------------------------------リセットcss------------------------------- */ /*--------------------------------共通---------------------------------------*/ body { font-family: sans-serif; } body { width: 100%; } #header_inner,#section02_inner,#company { width: 960px; margin: 0 auto; } /*--------------------------------共通---------------------------------------*/ /*-------------------------------ヘッダー ------------------------------------------*/ #header_inner { height: 85px; width:100%; position: relative; background-color:#c60000; } #header_logo{ position: absolute; top: 0; bottom: 0; margin: auto; font-size:1.7rem; color:#fff; } #header_logo { width: 194px; height: 40px; left: 60px; } /*-------------------------------ヘッダー ------------------------------------------*/ /*------------------------------- メインイメージ------------------------------------------*/ #main_image { display: table; width: 100%; height: 482px; background-size: cover; } #main_image_inner { width: 100%; height: 482px; position: relative; background: url(tennai.JPG) no-repeat; background-size:cover; } h1 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 500px; height: 85px; margin: auto; color: #000000; font-size: 4.3rem; text-align: center; display: table-cell; vertical-align: middle; background:rgba(255,255,255,0.8); } /*------------------------------- メインイメージ------------------------------------------*/ /*------------------------------- スクロール------------------------------------------*/ .scroll { height: 87px; width: 100%; background-color: #fd974f; position: relative; display: table; } .scroll:after { content: ""; display: block; width: 0px; height: 0px; bottom: -14px; border-top: 43px solid #fd974f; border-right: 60px solid transparent; border-left: 60px solid transparent; left: 0; right: 0; margin: auto; position: absolute; } .scroll h2 { color: #fff; font-size: 1.9rem; text-align: center; display: table-cell; vertical-align: middle; } /*-------------------------------スクロール ------------------------------------------*/ /*------------------------------- メイン------------------------------------------*/ nav { height: 396px; width: 100%; margin: 0 auto; background-color:#fef2e4; } #main_nav { width: 40%; min-width: 687px; height: 396px; overflow: hidden; margin: 0 auto; padding: 88px 0; } #main_nav li { float: left; height: 225px; width: 225px; border: 2px solid #000; border-radius: 50%; position: relative; background-color:#fd974f; } #main_nav li:hover { background-color:#e73f0b; } #main_nav li:after { content: ""; display: block; position: absolute; bottom: 22px; right: 0; left: 0; width: 21px; height: 21px; margin: auto; border-right: 3px solid #000; border-bottom: 3px solid #000; transform: rotate(45deg); } #main_nav li:last-of-type { float: none; margin: 0 auto; } #main_nav li:nth-of-type(2) { float: right; } #main_nav a { color: #000; font-size: 1.5rem; position: absolute; top: 0; left: 0; width: 100%; border-radius: 50%; text-align: center; padding: 83px 0 100px; } #div03 { margin-bottom: 100px; } .contents { height: 400px; width:1100px; margin:0 auto; padding:70px 0px; overflow: hidden; } .padding { margin-bottom:80px; } .left { float: left; height: 400px; width: 50%; background-repeat: no-repeat; background-size: cover; } #photo01 img{ width:100%; height:100%; object-fit:cover; } #photo02 img{ width:100%; height:100%; object-fit:cover; } .right { float: right; width: 50%; height: 400px; } .text { background-color: #fef2e4; position:relative; } .contents p,h4 { margin: 30px 120px 0 21px; color: #000000; } .contents h4 { font-size: 1.45rem; font-weight:bold; } .contents p { font-size:1.2rem; } .main_contact_inner { width: 30%; height: 140px; position: absolute; bottom:10px; right:50%; } .contact_right { float: right; } .contact_right_inner { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 243px; height: 33px; margin: auto; padding: 25px 65px 25px 20px; background-color: #c60000; border-radius: 100vh; transition: 0.4s; } .contact_right_inner:hover { transform: scale(1.1,1.1); } .contact_right p { float: right; color: #fff; font-size: 1.3rem; margin:5px 50px; font-weight:bold; } /*------------------------------- メイン------------------------------------------*/ /*------------------------------- フッター------------------------------------------*/ footer { height: 93px; background-color:#c60000; } footer p { /*margin-left: 119px;*/ font-size: 0.75rem; line-height: 93px; color:#fff; text-align:center; } /*------------------------------- フッター------------------------------------------*/ /*------------------------------- ページ1、2------------------------------------------*/ .section-ttl { font-size:2.4rem; font-weight:bold; text-align: center; margin-bottom: 50px; border-bottom:double 5px #c60000; } #about h3 { text-align:center; font-size:1.8rem; margin-bottom:20px; } #about p { font-size:1.4rem; line-height:1.5; text-align:center; } .section-wrapper { padding:100px 10% 50px; } /*-------------------------------------------------------------------------------------------------*/ #food { width:100%; padding-top:40px; margin-bottom:80px; position:relative; } #food::before { content: ''; background:#fef2e4; position:absolute; width:100%; height:350px; z-index:-1; } #food h2{ padding-top:30px; margin-bottom:30px; font-size:2rem; text-align:center; margin:0 auto; border-bottom: 4px solid #fd974f; width:200px; } .food-container ul{ display:flex; justify-content:space-between; margin:0 auto; } .food-container img{ width:400px; height:400px; object-fit:cover; margin-top:40px; } .food-container h3 { font-weight:bold; font-size:1.3rem; } .food-container p { font-size:1.1rem; } .food-container ul li { width:400px; } .food-container ul li figure { margin:0; } /*-------------------------------------------------------------------------------------------------*/ #history { text-align:center; margin :0 auto; background:#fef2e4; } #history .contents { display:flex; justify-content:space-between; margin :0 auto; align-items:center; } #history h2 { padding-top:50px; margin-bottom:30px; font-size:2rem; text-align:center; margin:0 auto; border-bottom: 3px solid #fd974f; width:200px; } .contents img{ width:400px; height:400px; object-fit:cover; /*margin-top:70px;*/ } .content { width:48%; background:#fff; } .content h3 { text-align:center; font-weight:bold; font-size:1.4rem; margin:13px 0; } .content p { text-align:center; font-size:1.1rem; margin:0 auto; } /*-------------------------------------------------------------------------------------------------*/ #question { margin-top:100px; padding-bottom:30px; margin:0 auto; width:100%; background:#fef2e4; } .question-btn { margin:0 auto; text-align:center; } .question-btn h2{ padding-top:50px; margin-bottom:30px; font-size:2rem; text-align:center; margin:0 auto; border-bottom: 3px solid #fd974f; width:200px; } .btn { padding:10px 0; width:960px; text-align:center; margin:0 auto; } .acd-check{ display: none; } .acd-label{ background: #fd974f; color: #fff; display: block; margin-bottom: 1px; padding: 10px; } .acd-content{ border: 1px solid #fd974f; height: 0; opacity: 0; padding: 0 10px; transition: .5s; visibility: hidden; } .acd-check:checked + .acd-label + .acd-content{ height: 40px; opacity: 1; padding: 10px; visibility: visible; } /*-------------------------------------------------------------------------------------------------*/ #info { width:100%; margin-top:50px; padding-bottom:80px; background:#fef2e4; } #info h2 { padding-top:50px; margin-bottom:30px; font-size:2rem; text-align:center; margin:0 auto; border-bottom: 3px solid #fd974f; width:200px; } #info .info { display:flex; justify-content:space-between; align-items:center; padding:0 150px; } .info dt { margin:15px 0; border-bottom:2px solid #c60000; font-weight:bold; } .info dd { font-size:1.2rem; } /*-------------------------------ページ1,2 ------------------------------------------*/