/*!
Theme Name: tomarigi
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tomarigi
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

tomarigi is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300&family=Montserrat:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300&display=swap');

html {
	margin: 0;
	padding: 0;
	font-size: 62.5%;
}

body {
    margin: 0;
    padding: 0;
    /*
    background: #000000;
    color: #ffffff;
    */
    font-size: 1.4em;
    font-family: 'Kiwi Maru', serif;
    background: #ffffff;
    color: #000000;
    /*
    font-family: 'Hina Mincho', serif;
    font-family: 'Kiwi Maru', serif;
	font-family: 'Montserrat', sans-serif;
	*/
}

.entry-title {
	display: none;
}

.mt3 {
	margin-top: 3em;
}

.section_p {
	line-height: 1.5em;
}

a {
	text-decoration: none;
	/*color: #ffffff;*/
	color: #000000;
}

header {
	display: flex;
	width: 100%;
	/*
	background: #000000;
	*/
	background: #ffffff;
	font-family: 'Montserrat', 'Zen Maru Gothic', sans-serif;
}

header h1 {
	font-size: 1.5em;
	padding: 0.7em;
	letter-spacing: 0.2em;
}

.header_logo{
	width: 100%;
	/*max-width: 250px;*/
}


.h1sub {
	font-size: 0.65em;
}

.header_menu{
	width: 100%;
}

.header_menu nav{
    display: flex;
    align-items: center;
    justify-content: end;
    height: 100%;
}
    
.header_menu ul{
	display: flex;
	justify-content: start;
}

.header_menu li{
	padding: 1em;
	list-style:none;
}

ul {
    padding: 0;
    margin: 0;
}

/*ハンバーガーメニュー開始*/
/*========= ナビゲーションのためのCSS ===============*/
#g-nav{
	/*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
	position:fixed;
	z-index: -1;
	opacity: 0;/*はじめは透過0*/
	/*ナビの位置と形状*/
	top:0;
	width:100%;
	height: 100vh;/*ナビの高さ*/
	/*background:#000000;*/
	background:#ffffff;
	/*動き*/
	transition: all 0.3s;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
	opacity: 1;
	z-index:999;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
	/*ナビの数が増えた場合縦スクロール*/
	position: fixed;
	z-index: 999; 
	width: 100%;
	height: 100vh;/*表示する高さ*/
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
	display: none;
	/*ナビゲーション天地中央揃え*/
	position: absolute;
	z-index: 999;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

#g-nav.panelactive ul {
	display: block;
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
	text-align: center; 
}

#g-nav li a{
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
	display: none;
	position:fixed;
	z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
	width: 50px;
	height:50px;
}
  
/*×に変化*/  
.openbtn1 span{
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 14px;
	height: 3px;
	border-radius: 2px;
	background-color: #000000;
	/*background-color: #ffffff;*/
	width: 45%;
  }

.openbtn1 span:nth-of-type(1) {
	top:15px; 
}

.openbtn1 span:nth-of-type(2) {
	top:23px;
}

.openbtn1 span:nth-of-type(3) {
	top:31px;
}

.openbtn1.active span:nth-of-type(1) {
	top: 18px;
	left: 18px;
	transform: translateY(6px) rotate(-45deg);
	width: 30%;
}

.openbtn1.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
	top: 30px;
	left: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
}
/*ハンバーガーメニューここまで*/

.top_screen {
	position: relative;
	width: 100%;
	height: 100%;
}

.top_screen_logo {
	position: absolute;
	top: 40%;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 500px;
	height: auto;
	margin: auto;
	transform: translate(8%, -50%);
}

.top_screen_icons {
	position: absolute;
	top: 65%;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 50px;
	height: auto;
	margin: auto;
	transform: translate(8%, -50%);
}

.slider {
	width: 100%;
	/*max-width: 1200px;*/
	margin: 0 auto;
}

.slick-dots {
	bottom: 0 !important;
}

.slick-dots li.slick-active button:before {
	color: #ffffff !important;
}

.slick-dots li button:before {
	color: #ffffff !important;
}

/*
.slider {
  height: 53vw;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  width: 100vw;
}
*/

.slider img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

@keyframes fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1); /* 拡大率 */
  }
}
.add-animation {
  animation: fadezoom 11s 0s forwards;
}

.section_top_wide {
	width: 100%;
	height: 200px;
	object-fit: cover;
	object-position: 80% 80%;
}

.flx2 {
	display: flex;
}

.flx2_left {
	width: 50%;
}

.flx2_right {
	width: 50%;
}

.flx2_menu {
	display: flex;
	flex-wrap: nowrap;
}

.flx2_menu_left {
	width: 50%;
}

.flx2_menu_right {
	width: 50%;
}

.concept_img,
.bakery_img {
	display: block;
	margin: auto;
	width: 80%;
	height: 100%;
	object-fit: cover;
}

.history_img,
.antique_img {
	display: block;
	width: 80%;
	height: 100%;
	object-fit: cover;
}

.top_about,
.top_history,
.top_cafe,
.top_bakery,
.top_antique,
.footer_shopinfo {
	width: 90%;
	max-width: 1040px;
	margin: auto;
	padding: 5em 0;
}

.top_about h2,
.top_history h2,
.top_cafe h2,
.top_bakery h2,
.top_antique h2,
.footer_shopinfo h2 {
	font-size: 2em;
	font-weight: bold;
	/*font-weight: normal;*/
	font-family: 'Montserrat', sans-serif;
	margin: 1.5em 0;
}

.top_about h3,
.top_history h3,
.top_bakery h3,
.top_antique h3,
.footer_shopinfo h3 {
	font-weight: normal;
}

.menu_desc {
	margin-top: 0;
}

.menu_flex_wrap  {
	display: flex;
}

.flex_menu_image  {
	width: 35%;
}

.flex_menu_image img {
	width: 80%;
	height: 100%;
	max-height: 600px;
	object-fit: cover;
}

.flex_menu_text h3 {
	font-size: 1.5em;
	font-family: 'Montserrat', sans-serif;
}

footer .cr{
	font-size: 0.8em;
    font-family: 'Hina Mincho', serif;
    text-align: center;
}

.shop_info {
	width: 100%;
	max-width: 750px;
	margin: auto
}

/* Google Mapを囲う要素 */
.map {
  position: relative;
  max-width: 700px;
  width: 100%;
  height: 0;
  padding-top: 55%; /* 比率を4:3に固定 */
  margin: auto;
}

/* Google Mapのiframe */
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.lineimg {
	width: 100%;
	max-width: 150px;
}

@media (max-width: 760px) {
  /*画面サイズが760px以下に適用*/
  
	.openbtn1{
		display: block;
	}

	.header_menu nav{
		display: none;
	}

	.top_screen_logo {
		position: absolute;
		top: 40%;
		width: 70%;
		transform: translate(8%, -50%);
	}

	.top_about,
	.top_history,
	.top_cafe,
	.top_bakery,
	.top_antique,
	.footer_shopinfo {
		width: 92%;
		margin: auto;
	}

}

@media (max-width: 600px) {
	/*画面サイズが600px以下に適用*/

	header h1 {
		font-size: 1.3em;
		padding: 0.3em;
	}

	.menu_flex_wrap  {
		display: flex;
		flex-wrap: wrap-reverse;
	}

	.flex_menu_image  {
		width: 100%;
	}

	.flex_menu_image img {
		width: 100%;
		height: 200px;
		object-fit: cover;
		padding: 2em 0;
	}

	.flx2 {
		display: flex;
		flex-wrap: wrap-reverse;
	}

	.top_bakery .flx2 {
		flex-wrap: wrap !important;
	}

	.flx2_left {
		width: 100%;
	}

	.flx2_right {
		width: 100%;
	}

	.flx2_menu_left {
		width: 65%;
	}

	.flx2_menu_right {
		width: 35%;
		text-align: right;
	}

	.concept_img,
	.bakery_img {
		display: block;
		margin: auto;
		width: 100%;
		height: 200px;
		object-fit: cover;
		padding: 2em 0;
	}

	.history_img,
	.antique_img {
		display: block;
		width: 100%;
		height: 200px;
		object-fit: cover;
		padding: 2em 0;
	}
}