@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600&display=swap');

/*font-family: 'Noto Serif JP', serif;*/
/* CSS Document */

/*--------------------------------------------
基本設定
小さな端末から大きな端末へ
最初は一般的なAndroidスマホで見た場合のスタイルを決める
想定端末：横幅360px Android
--------------------------------------------*/
body {
	background: #FAF9F5;
	font-size: 1rem;
	color: #26111A;
}
p {
	line-height: 2;
	font-size: 1rem;
	letter-spacing: 1px;
	text-align: justify;
}
#en_body p {
	text-align: left !important;
}
.scroll-prevent {
	position: fixed;
	width: 100%;
	height: 100%;
}
header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 60px;
	z-index: 9999;
}
header.change-color {
	background: rgba(250,249,245,0.8);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	box-shadow: 0px -10px 8px 10px rgba(0,0,0,0.1);
}
#toplogo {
	display: none;
	transition: 0.5s;
}
#toplogo.show {
	display: block;
	width: 117px;
	height: 54px;
	background: url("../img/SVG/logo_brown.svg") no-repeat center center/contain;
	margin-top: 0.18rem;
	transition: 0.5s;
}
#menu #hamberger {
	display: none;
}
#hamberger + label {
	display: block;
	width: 44px;
	height: 44px;
	position: absolute;
	top: 14px;
	right: 5px;
	z-index: 10000;
}
#hamberger + label span {
	display: block;
	width: 30px;
	height: 2px;
	background: #fff;
	border-radius: 1.5px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	transition: 0.3s;
}
#hamberger + label span.brown {
	background: #26111A;
}
#hamberger + label span:nth-child(1) {
	top: 5px;
}
#hamberger + label span:nth-child(2) {
	top: 14px;
}
#hamberger + label span:nth-child(3) {
	top: 24px;
}
#hamberger:checked + label span:nth-child(1) {
	top: 12px;
	transform: translate(0) rotate(45deg);
	left: 8px;
	background: #26111A;
}
#hamberger:checked + label span:nth-child(2) {
	opacity: 0;
}
#hamberger:checked + label span:nth-child(3) {
	top: 12px;
	transform: translate(0) rotate(-45deg);
	left: 8px;
	background: #26111A;
}
#hamberger ~ #bg_black {
	transition: 0.5s;
	display: block;
	position: fixed;
}
#hamberger:checked ~ #bg_black {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(19,9,14,0.70);
	transition: 0.5s;
	z-index: -100;
	position: absolute;
}
#hamberger ~ #main_menu {
	width: 265px;
	height: 100vh;
	min-height: 100vh;
	min-height: calc(var(--vh, 1vh) * 100);
	position: fixed;
	top: 0;
	right: -265px;
	transition: 0.5s;
	padding-bottom: 30px;
}
#hamberger:checked ~ #main_menu {
	background: url("../img/SVG/unit.svg") repeat top left/133px;
	background-color: #EFECE2;
	right: 0;
	transition: 0.5s;
	width: 265px;
	height: 100vh;
	position: fixed;
}
#hamberger ~ #main_menu ul {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	margin: 3.5rem auto auto 0.8rem;
}
#hamberger ~ #main_menu ul > li {
	margin-top: 25px;
}
#hamberger ~ #main_menu ul > li.sub_list {
	margin-top: 5px;
	margin-left: 2.1rem;
}
#hamberger ~ #main_menu ul .sub_list {
	position: relative;
}
#hamberger ~ #main_menu ul .sub_list::before {
	content: "▶︎";
	color: #26111A;
	display: inline-block;
	font-size: 0.8rem;
	position: absolute;
	top: 6.5px;
	left: -15px;
}
#hamberger ~ #main_menu ul li a span {
	color: #26111A;
	font-size: 1rem;
	line-height: 1.5;
	display: inline-block;
	letter-spacing: 0.8px;
}
#hamberger ~ #main_menu ul li a span:hover,
#hamberger ~ #main_menu ul li a span:active {
	color: #302329;
	position: relative;
	cursor: pointer;
}
#hamberger ~ #main_menu ul li a span::after {
	content: "";
	width: 0;
	height: 1px;
	background: #26111A;
	display: block;
	position: absolute;
	bottom: -1px;
	left: 0;
	transition: 0.3s;
}
#hamberger ~ #main_menu ul li a span:hover::after,
#hamberger ~ #main_menu ul li a span:active::after {
	width: 100%;
	transition: 0.3s;
}
#main_menu .icon_box_nav {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
#main_menu .icon_box_nav .sns_icon {
	display: block;
	margin-right: 0.9rem;
	margin-left: 0.2rem;
	width: 1.7rem;
	height: 1.7rem;
	transition: 0.3s;
}
#main_menu .icon_box_nav .sns_icon:nth-child(1) {
	background: url("../img/SVG/icon_youtube.svg") no-repeat center center/contain;
}
#main_menu .icon_box_nav .sns_icon:nth-child(2) {
	background: url("../img/SVG/icon_insta.svg") no-repeat center center/contain;
}
#main_menu .icon_box_nav .sns_icon:nth-child(3) {
	background: url("../img/SVG/icon_twitter.svg") no-repeat center center/contain;
}
#main_menu .icon_box_nav .sns_icon:nth-child(4) {
	background: url("../img/SVG/icon_blog.svg") no-repeat center center/contain;
}
#main_menu .icon_box_nav .sns_icon:hover,
#main_menu .icon_box_nav .sns_icon:active {
	transition: 0.3s;
	opacity: 0.7;
}
.lang {
	width: 35px;
	height: 35px;
	position: absolute;
	top: 12px;
	right: 51px;
}
.lang .lang_btn {
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
}
.lang .lang_btn .lang_img {
	width: 100%;
	height: 100%;
	background: url("../img/SVG/icon_earth.svg") no-repeat center center/contain;
}
.lang .lang_btn .lang_img.brown_icon {
	background: url("../img/SVG/icon_earth_brown.svg") no-repeat center center/contain;
}
.lang .lang_btn .lang_text {
	margin-top: 3px;
	font-size: 0.8rem;
	color: #fff;
	letter-spacing: 1px;
	text-align: center;
	display: block;
}
.lang .lang_btn .lang_text.brown_text {
	color: #26111A;
}



#fv {
	width: 100vw;
	height: 80vh;
}
#fv #video {
	position: relative;
	width: 100%;
	height: 100%;
}
#fv #video .u--bounce {
	content: "";
	display: block;
	width: 30px;
	height: 70px;
	background: url("../img/SVG/arrow_fv.svg") no-repeat center center/contain;
	position: absolute;
	top: 77vh;
	left: 49%;
	transform: translateX(-27%);
}
#fv #video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}
#video a {
	position: absolute;
	display: inline-block;
	right: 1.5rem;
	bottom: 0.5rem;
	z-index: 10;
	font-size: 11px;
	text-decoration: none;
	color: #FAF9F5;
	opacity: 0.7;
}
#video a::after {
	content: "";
	display: inline-block;
	width: 0.9rem;
	height: 1rem;
	background: url("../img/SVG/youtube_beige.svg") no-repeat center center/contain;
	position: absolute;
	top: -3px;
	right: -16px;
}
#video img {
	position: absolute;
	width: 300px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-shadow: 0 0 3px rgba(0,0,0,0.3);
}
#inner {
	max-width: 600px;
	margin: 0 auto;
}
#news {
	margin-top: 8rem;
	margin-bottom: 8rem;
	width: 100%;
}
#news h2{
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: 1px;
	margin-top: 7rem;
	margin-bottom: 2rem;
	text-align: center;
}
#news img {
	width: 90%;
    margin: 0 auto;
    display: block;
}
#news p {
	margin: 2rem auto 2rem auto;
	padding: 0 2.5rem;
	letter-spacing: 0px;
}
#news a {
	border-bottom: 1px solid #26111A ;
	color: #26111A;
	margin-left: 2.5rem;
	display: inline-block;
}
.context {
	padding: 0 2.5rem;
}
.title {
	width: auto;
	height: 2.5vw;
	min-height: 20px;
	display: block;
	margin: 0 auto;
	margin-bottom: 4rem;
	position: relative;
}
.title::after {
	content: "";
	display: block;
	width: 55px;
	height: 4vw;
	min-height: 30px;
	background: url("../img/SVG/hishigata.svg") no-repeat center center/contain;
	position: absolute;
	top: 76px;
	left: 50%;
	transform: translate(-50%,-50%);
}
#concept {
	margin-top: 6.8rem;
}
#concept .title {
	background: url("../img/SVG/title.svg") no-repeat center center/contain;
}
#concept p {
	padding: 3rem 0;
}
#profile {
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
}
#profile img {
	width: 100%;
}
#profile h2 {
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	font-size: 1.5rem;
	padding: 0 2.5rem;
	padding-top: 3rem;
	letter-spacing: 1px;
}
#profile h3 {
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	font-size: 0.9rem;
	padding: 0 2.5rem;
	padding-top: 0.5rem;
	letter-spacing: 2px;
}
#profile p {
	padding: 0 2.5rem;
	padding-top: 2rem;
}
#profile a.kochira {
	display: block;
	padding: 1.5rem 2.5rem;
	font-size: 0.9rem;
	color: #6F5C5E;
	position: relative;
}
#profile a.kochira::after {
	content: "";
	display: inline-block;
	width: 35px;
	height: 16px;
	background: url("../img/SVG/arrow_mini.svg") no-repeat center center/contain;
	margin-left: 0.2rem;
	padding-bottom: 0.2rem;
	opacity: 0.8;
	transition: 0.3s;
}
#profile a.kochira::before {
	content: "";
	display: block;
	position: absolute;
	top: 48px;
	left: 2.5rem;
	width: 0px;
	height: 1px;
	background: #26111A;
	transition: 0.3s;
}
#profile a.kochira:hover::before,
#profile a.kochira:active::before {
	width: 143px;
	transition: 0.3s;
	opacity: 0.75;
}
#en_body #profile a.kochira:hover::before,
#en_body #profile a.kochira:active::before {
	width: 318px;
}
#profile .icon_box {
	padding: 0 2.5rem;
	margin-top: 1rem;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
#profile .icon_box .sns_icon {
	display: block;
	margin-right: 1rem;
	margin-left: 0.2rem;
	width: 2.1rem;
	height: 2.1rem;
	transition: 0.3s;
	background: url("../img/SVG/icon_youtube.svg") no-repeat center center/contain;
}
#profile .icon_box .sns_icon:nth-child(1) {
	background: url("../img/SVG/icon_youtube.svg") no-repeat center center/contain;
}
#profile .icon_box .sns_icon:nth-child(2) {
	background: url("../img/SVG/icon_insta.svg") no-repeat center center/contain;
}
#profile .icon_box .sns_icon:nth-child(3) {
	background: url("../img/SVG/icon_twitter.svg") no-repeat center center/contain;
}
#profile .icon_box .sns_icon:hover,
#profile .icon_box .sns_icon:active {
	transition: 0.3s;
	opacity: 0.7;
}
#collection {
	margin-top: 5rem;
}
#collection img {
	width: 100%;
}
#collection .title {
	background: url("../img/SVG/title2.svg") no-repeat center center/contain;
	margin-top: 4rem;
}
#en_body #collection .title {
	background: url("../img/SVG/title_en.svg") no-repeat center center/contain;
}
#collection #collection_list {
	margin-top: 5.4rem;
	padding: 0 2.5rem;
}
#collection h2 {
	line-height: 2.5;
	letter-spacing: 1px;
}
#collection #collection_list #collection_cap {
	text-align: left;
}
#collection h2 .number {
	font-size: 1.3rem;
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
}
#collection h2 .line {
	font-size: 1.5rem;
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	margin-left: 0.5rem;
}
#collection h2 ~ p {
	padding-top: 3rem;
}
#collection .line_section {
	margin: 1rem;
	margin-top: 6rem;
	border: 1px solid #483439;
}
#collection .line_section > h2 {
	color: #FAF9F5;
	position: relative;
	padding-top: 0.4rem;
	margin-left: 2rem;
	margin-top: -2.5rem;
}
#collection .line_section > h2::after {
	content: "";
	display: block;
	width: 245px;
	height: 50px;
	background-color: #483439;
	position: absolute;
	top: 13px;
	left: -15px;
	z-index: -1;
}
#collection .line_section2 > h2::after {
	width: 315px;
}
#collection .line_section3 > h2::after {
	width: 168px;
}
#collection .line_section .line_cap {
	padding: 2.2rem;
	padding-top: 2.4rem;
	padding-bottom: 1rem;
}
#collection .line_section1 .line_cap {
	padding: 2.2rem;
	padding-top: 2.4rem;
	padding-bottom: 3.5rem;
}
#collection .line_section1 .price,
#collection .line_section3 .price {
	padding: 2.2rem;
	padding-top: 2.4rem;
	padding-bottom: 3.5rem;
}
#collection .line_section small {
	font-size: 0.9rem;
	line-height: 1.5;
	letter-spacing: 1px;
	color: #6F5C5E;
	display: inline-block;
	width: calc(100% - 5rem);
	margin: 0.5rem 2.2rem 3.5rem 2.2rem;
	padding: 0.3rem;
	border-top: 1px solid #26111A;
	border-bottom: 1px solid #26111A;
}
#collection .line_section a {
	display: block;
	padding: 0.4rem 2.2rem;
	color: #26111A;
	font-weight: 500;
	transition: 0.3s;
	position: relative;
}
#collection .line_section a::after {
	content: "";
	display: inline-block;
	width: 35px;
	height: 16px;
	background: url("../img/SVG/arrow_mini.svg") no-repeat center center/contain;
	margin-left: 0.2rem;
	padding-bottom: 0.2rem;
	transition: 0.3s;
}
#collection .line_section a::before {
	content: "";
	display: block;
	position: absolute;
	top: 30px;
	left: 2.2rem;
	width: 0px;
	height: 1px;
	background: #26111A;
	transition: 0.3s;
}
#collection .line_section2 a:hover::before,
#collection .line_section2 a:active::before {
	width: 207px;
	transition: 0.3s;
	opacity: 0.75;
}
#en_body #collection .line_section2 a:hover::before,
#en_body #collection .line_section2 a:active::before {
	width: 222px;
}
#en_body #collection .line_section2 a:last-child:hover::before,
#en_body #collection .line_section2 a:last-child:active::before {
	width: 283px;
}
#collection .line_section3 a:hover::before,
#collection .line_section3 a:active::before {
	width: 139px;
	transition: 0.3s;
	opacity: 0.75;
}
#en_body #collection .line_section3 a:hover::before,
#en_body #collection .line_section3 a:active::before {
	width: 232px;
}
#collection .line_section a:hover,
#collection .line_section a:active,
#collection .line_section a:hover::after,
#collection .line_section a:active::after {
	opacity: 0.75;
	transition: 0.3s;
}
#collection .line_section1 a:last-child,
#collection .line_section2 a:last-child, 
#collection .line_section3 a.reserve_link {
	margin-bottom: 3rem;
}
#collection .line_section .fade {
	margin-top: 3rem;
	margin-bottom: 2.5rem;
}
#collection .line_section .fade .slick-list {
	padding: 0 2.2rem;
}
#collection .line_section .accordion {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 60px;
	margin: 2.2rem;
	margin-top: 0;
	background: #4D3C40;
	
}
#collection .line_section .accordion .ac-hl {
	display: block;
	letter-spacing: 1px;
	margin-left: 1.5rem;
	color: #FAF9F5;
}
#collection .line_section .accordion::after {
	content: "+";
	font-weight: 600;
	transform: translateY(-57%);
	display: inline-block;
	position: absolute;
	right: 1.5rem;
	top: 50%;
	color: #FAF9F5;
	transition: .3s;
}
#collection .line_section .accordion.active::after {
	content: "-";
	transition: .3s;
}
#collection .line_section .ac_box {
	display: none;
	padding: 0 2.2rem;
	margin-bottom: 5rem;
}
#collection .line_section p.ac_title {
	font-size: 1.1rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid #26111A;
}
#collection .line_section p.ac-text {
	margin-bottom: 2rem;
	line-height: 1.5;
}
#collection .reserve_link span {
	font-weight: bold;
}
#collection .line_section p.reserve_state {
	display: block;
	padding: 0.5rem 2.2rem;
	font-size: 0.9rem;
	line-height: 1.5;
	opacity: 0.9;
	margin-bottom: 3rem;
	margin-top: -3rem;
}

/*#collection .line_section3 p.reserve_state {
	display: none;
}*/

h4.gallery_title {
	margin: 6rem auto 1rem auto;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
h4.gallery_title span {
	font-size: 1.2rem;
	display: inline-block;
	letter-spacing: 1px;
}
h4.gallery_title::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	background: url("../img/SVG/icon_insta.svg") no-repeat center center/contain;
	margin-right: 0.4rem;
}
h4.insta_title::before {
	background: url("../img/SVG/icon_insta.svg") no-repeat center center/contain;
	margin-right: 0.4rem;
}
h4.blog_title::before {
	background: url("../img/SVG/icon_blog.svg") no-repeat center center/contain;
	margin-right: 0.4rem;
}
.insta_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: 2rem auto;
	max-width: 500px;
	width: calc(100% - 4rem);
}
.insta_list a {
	width: calc(98% / 3);
	margin-right: 1%;
	margin-bottom: 1%;
	box-shadow: 2px 2px 4px rgba(40,40,40,0.2);
}
.insta_list a:nth-child(3n) {
	margin-right: 0%;
}
.insta_list li {
	display: none;
}
/*.insta_list li {
	width: calc(98% / 3);
	margin-right: 1%;
	margin-bottom: 1%;
}
.insta_list li:nth-child(3n) {
	margin-right: 0%;
}*/
.insta_list img{
	width: 100%;
}
#contact {
	max-width: 528px;
	margin: 8rem auto 0 auto;
}
#contact h2 {
	text-align: center;
	font-size: 1.5rem;
	font-family: 'Noto Serif JP', serif;
}
#contact p {
	text-align: left;
	display: block;
	margin: 0 auto;
	padding: 3rem 2rem 0 2rem;
}
#contact form dl {
	padding: 30px;
	max-width: 600px;
	margin: 0 auto;
	font-size: 1rem;
}
#contact form dl dt {
	padding-top: 20px;
	padding-bottom: 5px;
}
#contact form dl dd {
	border-bottom: 1px solid #6F5C5E;
	padding-bottom: 20px;
}
#contact form dl dt.last + dd {
	border-bottom: none;
}
#contact form dl dd:last-child {
	border-bottom: none;
	padding: 30px 0 0;
	text-align: center;
}
#contact aside {
	font-size: 1rem;
	padding: 10px;
	border: 1px solid #ccc;
	overflow: auto;/*autoでスクロールが発生する*/
	border-radius: 10px;
	margin-bottom: 10px;
	color: #666;
	height: 160px;
}
dt strong {
	font-size: 0.8rem;
	color: #B21515;
	padding-left: 0.5rem;
}
dt small {
	font-size: 1rem;
	color: #555;
}
input[type="text"] {
	width: 15em;
	font-size: 1rem;
}
input[type="email"] {
	width: 29ex;/*emは全角、exは半角*/
	font-size: 1rem;
	max-width: 100%;
}
textarea {
	font-size: 1rem;
}
input[type="submit"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: #6F5C5E;
	background-image: none;
	border-color: rgba(255,255,255,0);
	border-style: none;
	border-width: 0px;
	border: none;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 1em;
	margin: 0 0 1em;
	text-decoration: none;
	width: 150px;
	height: 40px;
	text-align: center;
	box-shadow: 0px 0px 10px 0px rgba(10,10,10,0.2);
	margin-top: 2rem;
}
.kakunin input[type="submit"] {
	margin-right: 1rem;
	margin-left: 1rem;
}
.return2 {
	display: block;
	margin: 9rem auto 2rem auto;
	text-align: center;
	text-decoration: none;
	color: #26111A;
	letter-spacing: 1px;
}
.return {
	margin: 9rem auto 2rem auto;
	text-align: center;
	text-decoration: none;
	color: #26111A;
	position: relative;
	letter-spacing: 1px;
	width: 170px;
	height: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.return span::before {
	content: "";
	background: url("../img/SVG/arrow_return.svg") no-repeat center center/contain;
	display: block;
	position: absolute;
	width: 13px;
	height: 70px;
	top: -57px;
	left: 50%;
	transform: translateX(-56%);
}
footer.context {
	background-color: #D7CFB5;
}
footer.context > a {
	background: url("../img/SVG/logo_white2.svg") no-repeat center center/contain;
	width: 180px;
	height: 160px;
	display: block;
	margin-left: -0.5rem;
}
footer a {
	text-decoration: none;
	color: #fff;
	letter-spacing: 1px;
	font-weight: 400;
}
#footer_nav ul > li {
	padding: 1rem 0;
}
#footer_nav ul .li_parent {
	padding-bottom: 0rem;
}
#footer_nav ul .sub_list {
	padding: 0.7rem 0 0 2rem;
	position: relative;
}
#footer_nav ul .sub_list:last-child {
	padding-bottom: 1rem;
}
#footer_nav ul .sub_list::before {
	content: "▶︎";
	color: #fff;
	display: inline-block;
	font-size: 0.7rem;
	position: absolute;
	top: 15px;
	left: 18px;
}
footer small {
	text-align: center;
	display: block;
	color: #fff;
	width: 150px;
	margin: 0 auto;
	line-height: 1.3;
	padding-bottom: 0.5rem;
}
footer .icon_box {
	padding-left: 1.2rem;
	margin: 2.5rem auto 1rem auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
footer .icon_box .sns_icon {
	display: block;
	margin-right: 1rem;
	margin-left: 0.2rem;
	width: 2.1rem;
	height: 2.1rem;
	transition: 0.3s;
	background: url("../img/SVG/icon_youtube.svg") no-repeat center center/contain;
}
footer .icon_box .sns_icon:nth-child(1) {
	background: url("../img/SVG/icon_youtube.svg") no-repeat center center/contain;
}
footer .icon_box .sns_icon:nth-child(2) {
	background: url("../img/SVG/icon_insta.svg") no-repeat center center/contain;
}
footer .icon_box .sns_icon:nth-child(3) {
	background: url("../img/SVG/icon_twitter.svg") no-repeat center center/contain;
}
footer .icon_box .sns_icon:nth-child(4) {
	background: url("../img/SVG/icon_blog.svg") no-repeat center center/contain;
}
footer .icon_box .sns_icon:hover,
footer .icon_box .sns_icon:active {
	transition: 0.3s;
	opacity: 0.7;
}
.grecaptcha-badge { visibility: hidden; }

/*--------------------------------------------
想定端末：横幅=>375px iPhone12mini,SE,6,7,8　12mini以外は物理ホームボタンがない
*/
@media screen and (min-width:375px) {
	








}
/*
横幅=>375px--終了
--------------------------------------------*/


/*--------------------------------------------
想定端末：横幅=>375px かつ 縦幅=>668 iPhoneX,Xs,11pro
ここから物理ホームボタン無しで角丸の画面に。この枠は使わなくてもOK。一応準備
*/
@media screen and (min-width:375px) and (min-height:668px) {
	


}
/*
横幅=>375px かつ 縦幅=>668--終了
--------------------------------------------*/



/*--------------------------------------------
想定端末：横幅=>390px iPhone12,12Pro
*/
@media screen and (min-width:390px) {
	








}
/*
横幅=>390px--終了
--------------------------------------------*/


/*--------------------------------------------
想定端末：横幅=>414px iPhone8Plus　物理ホームボタンあり
*/
@media screen and (min-width:414px) {
	








}
/*
横幅=>414px--終了
--------------------------------------------*/

/*--------------------------------------------
想定端末：横幅=>414px かつ 縦幅=>737 iPhoneXR,11
ここから物理ホームボタン無しで角丸の画面に。この枠は使わなくてもOK。一応準備
*/
@media screen and (min-width:414px) and (min-height:737px) {
	


}
/*
横幅=>375px かつ 縦幅=>668--終了
--------------------------------------------*/



/*
ここまでスマホ縦 Portrait
==========================================================
==========================================================
==========================================================
ここからスマホ横 Landscape
*/

/*--------------------------------------------
想定端末：横幅=>640px Android
*/
@media screen and (min-width:640px) {
	



}
/*
横幅=>640px--終了
--------------------------------------------*/

/*--------------------------------------------
想定端末：横幅=>667px iPhone8
*/
@media screen and (min-width:667px) {
	



}
/*
横幅=>667px--終了
--------------------------------------------*/

/*--------------------------------------------
想定端末：横幅=>736px iPhone8 Plus
*/
@media screen and (min-width:736px) {
	



}
/*
横幅=>736px--終了
--------------------------------------------*/

/*--------------------------------------------
想定端末：横幅=>812px iPhone12mini,X,XS
*/
@media screen and (min-width:812px) {
	



}
/*
横幅=>812px--終了
--------------------------------------------*/

/*--------------------------------------------
想定端末：横幅=>844px iPhone12
*/
@media screen and (min-width:844px) {
	



}
/*
横幅=>844px--終了
--------------------------------------------*/

/*--------------------------------------------
想定端末：横幅=>896px iPhoneXR,11
*/
@media screen and (min-width:896px) {
	



}
/*
横幅=>896px--終了
--------------------------------------------*/


/*--------------------------------------------
想定端末：横幅=>926px iPhone12ProMax
*/
@media screen and (min-width:926px) {
	



}
/*
横幅=>926px--終了
--------------------------------------------*/


/*
ここまでスマホ横 Landscape
==========================================================
==========================================================
==========================================================
ここからタブレット縦 Portrait
*/


/*--------------------------------------------
想定端末：横幅=>768px iPad9.7inch
9.7inchの横幅はiPhoneXR,11,12Pro等より小さいのでスマホと混同しないようにスマホより大きい高さを指定、余裕を持って500
*/
@media screen and (min-width:768px) and (min-height:500px) {




}
/*
横幅=>768px--終了
--------------------------------------------*/

/*--------------------------------------------
想定端末：横幅=>810px iPad10.2inch
10.2inchの横幅はiPhoneXR,11,12Pro等より小さいのでスマホと混同しないようにスマホより大きい高さを指定、余裕を持って500
*/
@media screen and (min-width:810px) and (min-height:500px) {




}
/*
横幅=>810px--終了
--------------------------------------------*/

/*--------------------------------------------
想定端末：横幅=>834px iPad11inch
11inchの横幅はiPhone12ProMaxより小さいのでスマホと混同しないようにスマホより大きい高さを指定、余裕を持って500
*/
@media screen and (min-width:834px) and (min-height:500px) {



}
/*
横幅=>834px--終了
--------------------------------------------*/

/*--------------------------------------------
想定端末：横幅=>1024px iPad12.9inch
*/
@media screen and (min-width:1024px) {




}
/*
横幅=>1024px--終了
--------------------------------------------*/


/*
ここまでタブレット縦-Portrait
==========================================================
==========================================================
==========================================================
ここからタブレット横 Lnadscape
*/


/*--------------------------------------------
想定端末：横幅=>1024px iPad9.7inch
9.7inchを横に構えた時横幅はiPad12.9inchの横幅と同じだから混同しないようにorientationで画面向きを指定
*/
@media screen and (min-width:1024px) and (orientation:landscape) {




}
/*
横幅=>1024px--終了
--------------------------------------------*/

/*--------------------------------------------
想定端末：横幅=>1080px iPad10.2inch
*/
@media screen and (min-width:1080px) {




}
/*
横幅=>1080px--終了
--------------------------------------------*/

/*--------------------------------------------
想定端末：横幅=>1194px iPad11inch
*/
@media screen and (min-width:1194px) {




}
/*
横幅=>1194px--終了
--------------------------------------------*/

/*--------------------------------------------
想定端末：横幅=>1366px iPad12.9inch
*/
@media screen and (min-width:1366px) {




}
/*
横幅=>1366px--終了
--------------------------------------------*/


/*
ここまでタブレット横 Landscape
==========================================================
==========================================================
==========================================================
ここからPC(マウスがある)　MacBookPro13inchとiPad12.9inchの横向きは同じ1366で区別できない
*/

/*--------------------------------------------
想定端末：横幅=>1367px MacBookPro13inchより大きいPCたち
*/
@media screen and (min-width:1367px) {




}
/*
横幅=>1367px--終了
--------------------------------------------*/