Newer
Older
Cafe / JOHO.css
/*-------------------------------------リセット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 ------------------------------------------*/