@charset 'UTF-8';

/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////// PC全ページ共通CSS ///////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */

/* ==================================================
BASE (RESET)
================================================== */
html { box-sizing: border-box; width: 100%; margin: 0; padding: 0; }
*, *::after, *::before { box-sizing: inherit; }
body { position: relative; width: 100%; margin: 0; padding: 0; text-align: center; }
#allWrap { width: 100%; margin: 0 auto; }

h1, h2, h3, h4, h5, h6, p { font-size: 100%; font-weight: normal; margin: 0; padding: 0; }
ul, ol, dl { margin: 0; padding: 0; vertical-align: baseline; background: transparent; }
ol, li { list-style: none; }
dt, dd { font-weight: normal; font-style: normal; margin: 0; padding: 0; }
table{ border-collapse: collapse; border-spacing: 0; }
th, td { font-size: inherit; font-weight: normal; font-style: normal; empty-cells: show; }
input, select { vertical-align: middle; }
input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; /*border: 0;*/ }
pre { white-space: pre-wrap; }
em, strong, i { font-style: normal; }
img { font-size: 0; line-height: 0; border: 0; vertical-align: bottom; }
img, object, embed, video {max-width: 100%;}
/*レスポンシブ対応*/
img { max-width: 100%; height: auto; }
/* ---------- */
a { font-size: inherit; margin: 0; padding: 0; background: transparent; }


/* ==================================================
FONT
================================================== */
html { font-size: 62.5%; }
body {
	/*ゴシック系*/
	/*font-family: "PT Sans Narrow", "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;*/
	/*明朝系*/
	font-family: "Prata", "Sawarabi Mincho", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	/**/
	font-size: 1rem;
	font-weight: 400;
	/*line-height: 1.8;
	letter-spacing: .05em;*/
	color: #000;
	-webkit-font-smoothing: antialiased;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%; /* iPhoneの文字サイズバグの回避 */
}

.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }
.webfont { font-family: "Playfair Display", serif; }
/*
font-family: "Playfair Display", serif;
font-family: "Prata", serif;
font-family: "PT Sans Narrow", sans-serif;
*/

#allWrap { font-size: 1.4rem; letter-spacing: 0.15em; }
#allWrap p { line-height: 2; margin-bottom: 1.2em; }

/* ################ ↓↓↓ MEDIAQUERY ↓↓↓ ########## */ @media screen and (max-width: 768px) {
html { font-size: 10px; letter-spacing: 0; }
#allWrap p { line-height: 1.6; }
} /* ############## ↑↑↑ MEDIAQUERY ↑↑↑ ########## */


/* ==================================================
LINK
================================================== */
a:link { text-decoration: underline; color: #333; }
a:visited { text-decoration: underline; color: #333; }
a:hover { text-decoration: none; color: #7a7a7a; }
a:active { text-decoration: none; color: #7a7a7a; }
a:hover img.csshover { opacity: .6; }
a { outline: 0; transition:opacity 0.4s ease-out 0s;}
:focus { outline: 0; }


/* マウスオーバーでimgをZOOM
------------------------------ */
a.hoverZoom { position: relative; display: block; overflow: hidden; text-decoration: none; }
a.hoverZoom img {
	width: 1000px; /*親ブロック以上のサイズを指定*/
	max-width: 100%; /*原寸より拡大させない*/
	transition: all .25s linear 0s;
}
a.hoverZoom:hover img { transform: scale(1.05); }


/* ==================================================
SPの時のみ表示
(.spOnlyが付いた要素は、w769px以上では非表示)
================================================== */
/* ################ ↓↓↓ MEDIAQUERY ↓↓↓ ########## */ @media screen and (min-width: 769px) {
.spOnly { display: none !important; }
.pcOnly { }
} /* ############## ↑↑↑ MEDIAQUERY ↑↑↑ ########## */

/* ==================================================
PCの時のみ表示
(.pcOnlyが付いた要素は、w768px以下では非表示)
================================================== */
/* ################ ↓↓↓ MEDIAQUERY ↓↓↓ ########## */ @media screen and (max-width: 768px) {
.spOnly { }
.pcOnly { display: none !important; }
} /* ############## ↑↑↑ MEDIAQUERY ↑↑↑ ########## */


/* ==================================================
WRAPPER
================================================== */
body {}
body#pageHome {}

#allWrap {
	opacity: 1;
	transition: all 1.5s ease-out 0.5s;
}

#allWrap.introAnimation {
	opacity: 1;
}

#allWrap.introFin {
	transition: none;
}


#introBlock {
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(255,255,255,1);
}

#introBlock.on {
	animation: doorBg 6s ease-in 0s forwards;
}

/* door */
#introBlock .door {
	position: fixed;
	z-index: 10003;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: url(/asset/img/intro_door.png) no-repeat center center;
}

#introBlock.setPos .door {
}

#introBlock.on .door {
	opacity: 0;
	animation: door 6s ease-in 0s forwards;
}

/* doorLeft */
#introBlock .doorLeft {
	position: fixed;
	z-index: 10001;
	top: 0;
	left: -100vw;
	width: 100%;
	height: 100vh;
	background: url(/asset/img/intro_door_left.png) no-repeat center center;
}

#introBlock.setPos .doorLeft {
}

#introBlock.on .doorLeft {
	opacity: 0;
	left: 0;
	animation: doorLeft 6s ease-in 0s forwards;
}

/* doorRight */
#introBlock .doorRight {
	position: fixed;
	z-index: 10002;
	top: 0;
	right: -100vw;
	width: 100%;
	height: 100vh;
	background: url(/asset/img/intro_door_right.png) no-repeat center center;
}

#introBlock.setPos .doorRight {
}

#introBlock.on .doorRight {
	opacity: 0;
	right: 0;
	animation: doorRight 6s ease-in 0s forwards;
}
/**/

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 768px) {
#introBlock.on {
}
	
/* door */
#introBlock .door {
	background: url(/asset/img/intro_door_sp.png) no-repeat center 60%;
}

/* doorLeft */
#introBlock .doorLeft {
	background: url(/asset/img/intro_door_left_sp.png) no-repeat center 60%;
}

/* doorRight */
#introBlock .doorRight {
	background: url(/asset/img/intro_door_right_sp.png) no-repeat center 60%;
}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

@keyframes door {
	0%{ opacity: 0; }
	20%{ opacity: 0; }
	40%{ opacity: 1; z-index: 10003; }
	41.5%{ opacity: 1; z-index: 10003; }
	57%{ opacity: 0; z-index: -10003; }
	100%{ opacity: 0; z-index: -10003; }
}

@keyframes doorLeft {
	0%{ opacity: 0; left: 0; }
	40%{ opacity: 0; }
	41%{ opacity: 1; }
	55%{ left: 0; }
	99%{ left: -100vw; opacity: 1; z-index: 10001; }
	100%{ left: -100vw; opacity: 1; z-index: -10001; }
}

@keyframes doorRight {
	0%{ opacity: 0; right: 0; }
	40%{ opacity: 0; }
	41%{ opacity: 1; }
	55%{ right: 0; }
	99%{ right: -100vw; opacity: 1; z-index: 10002; }
	100%{ right: -100vw; opacity: 1; z-index: -10002; }
}
@keyframes doorBg {
	0%{ background-color: rgba(255,255,255,1); }
	40%{ background-color: rgba(255,255,255,1); }
	80%{ background-color: rgba(255,255,255,0); }
	99%{ background-color: rgba(255,255,255,0); z-index: 10000; }
	100%{ background-color: rgba(255,255,255,0); z-index: -10000; }
}


/* ==================================================
HEADER
================================================== */
header#mainHdr {
}


/* ==================================================
GLOBAL NAVIGATION
================================================== */
nav.globalMenu {
	/*position: absolute;
	z-index: 100;
	top: 0;
	right: 0;*/
	/*! width: 30%; */
	width: 159px;
	margin: 0 auto;
}

.globalMenu {
}

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (min-width: 769px) {
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

.globalMenu.accordionMenu {
	position: fixed;
	top: -400px;
	right: 50px;
	opacity: 0;
	transition: all 0.4s ease-out 0s;
	z-index: 100;
}

.navOpen .globalMenu.accordionMenu {
	top: 100px;
	opacity: 1;
}

/*#bodyCover div,*/
#navArea .normalMenu,
#mainArea,
#cntWrap {
	transition: filter 0.6s ease-out 0s;
	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	-o-filter: blur(0px);
	-ms-filter: blur(0px);
	filter: blur(0px);
}

/*.navOpen #bodyCover div,*/
.navOpen #navArea .normalMenu,
.navOpen #mainArea,
.navOpen #cntWrap {
	-webkit-filter: blur(4px);
	-moz-filter: blur(4px);
	-o-filter: blur(4px);
	-ms-filter: blur(4px);
	filter: blur(4px);
}

.globalMenu .navWrap {
}

.globalMenu .navWrap .inner {
	/*! padding: 150px 0; */
	text-align: center;
}

.globalMenu .navWrap h1.logo {
	width: 159px;
	margin: 0 auto;
	padding: 0 0 60px;
	background: url(/asset/img/nav_bg_logo.svg) no-repeat left top;
	background-size: 100% auto;
}

.globalMenu .navWrap h1.logo a {
}

.globalMenu .navWrap h1.logo a img {
}

.globalMenu .navWrap ul {
	width: 159px;
	text-align: left;
	margin: 0 auto;
	background: url(/asset/img/nav_bg_menu.svg) no-repeat right bottom;
	background-size: 100% auto;
	padding: 0 0 1px 3px;
}

.globalMenu .navWrap ul li {
	font-size: 1.3rem;
	font-family: "Playfair Display", serif;
	letter-spacing: 0.1em;
	margin-bottom: 30px;
}

.globalMenu .navWrap ul li a {
	color: #000;
	text-decoration: none;
	position: relative;
	display: inline-block;
}

.globalMenu .navWrap ul li a::before {
	content: "";
	display: block;
	width: 0%;
	height: 1px;
	background: #000;
	position: absolute;
	top: 50%;
	left: -5%;
	transition: all 0.4s ease-out 0s;
}

.globalMenu .navWrap ul li a:hover::before {
	width: 110%;
}

/* accordionBtn 
------------------------------ */ 
.accordionBtn {
	position: fixed;
	z-index: 100;
	top: -40px;
	right: 35px;
	display: block;
	width: 44px;
	height: 44px;
	cursor: pointer;
	transition:all 0.6s ease-out 0s;
	background: rgba(255,255,255,0);
	/*border-radius: 30px;
	border: 1px solid #fff;*/
}

.accordionBtn.fixed {
	opacity: 1;
	top: 40px;
}

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 960px) {
.accordionBtn {
	/*! top: 35px; */
	/*! right: 35px; */
}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

/* ################ ↓↓↓ MEDIAQUERY ↓↓↓ ########## */ @media screen and (max-width: 640px) {
.accordionBtn {
	top: -100px;
	right: 12px;
}

.accordionBtn.fixed {
	top: 20px;
}
} /* ############## ↑↑↑ MEDIAQUERY ↑↑↑ ########## */

.accordionBtn em {
	position: relative;
	top: 20px;
	left: 6px;
	display: block;
	width: 32px;
	height: 2px;
	transition: all .5s ease-out 0s;
	border-radius: 3px;
	background: rgba(0,0,0,1.0);
}

.accordionBtn em:before,
.accordionBtn em:after {
	position: absolute;
	display: block;
	width: 32px;
	height: 2px;
	content: '';
	transition: all .3s ease-out 0s !important;
	transform: rotate(0deg);
	border-radius: 3px;
	background: rgba(0,0,0,1.0);
}

.accordionBtn em:before { transform: translateY(8px); }

.accordionBtn em:after { transform: translateY(-8px); }

/* メニューOPEN時 */
/*html.scrollNone,
body.scrollNone { overflow: hidden; }*/

.navOpen .accordionBtn em {
	transform: rotate(180deg);
	background: rgba(0,0,0,0.0);
}

.navOpen .accordionBtn em:before {
	height: 2px;
	transform: translateY(0) rotate(-45deg);
}

.navOpen .accordionBtn em:after {
	height: 2px;
	transform: translateY(0) rotate(45deg);
}
/* ----- */

/* accordionBg
------------------------------ */
.accordionBg {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	width: 0vw;
	height: 0vh;
	z-index: 98;
	background: rgba(255,255,255,0);
	transition: all 0.4s ease-out 0s;
	opacity: 0;
}

.navOpen .accordionBg {
	opacity: 1;
	width: 100vw;
	height: 100vh;
}
/* ----- */


/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 768px) {
nav.globalMenu {
	width: 100%;
	padding: 0 30px;
}

.globalMenu {
}

.globalMenu .navWrap {
}

.globalMenu .navWrap .inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: nowrap;
	flex-direction: row;
}

.globalMenu .navWrap h1.logo {
	width: 150px;
	text-align: left;
	padding: 0;
	margin: -36px 0 0;
	position: relative;
	z-index: 100;
}

.globalMenu .navWrap h1.logo a {
}

.globalMenu .navWrap h1.logo a img {
	width: 100%;
}

.globalMenu .navWrap ul {
	margin: 0;
	padding: 20px 0;
	width: calc(100% - 170px);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
}

.globalMenu .navWrap ul li {
	margin: 0 0 10px 20px;
	/*! flex: 1 1 0; */
}

.globalMenu .navWrap ul li a {
}

.globalMenu .navWrap ul li a::before {
}

.globalMenu .navWrap ul li a:hover::before {
}


.globalMenu.accordionMenu.accordionMenu {
	position: fixed;
	top: -400px;
	right: 50px;
	opacity: 0;
	transition: all 0.4s ease-out 0s;
	z-index: 100;
	padding: 0;
	width: 180px;
}

.navOpen .globalMenu.accordionMenu.accordionMenu {
	top: 80px;
	opacity: 1;
}

.globalMenu.accordionMenu .navWrap {
	width: 159px;
}

.globalMenu.accordionMenu .navWrap .inner {
	/*! padding: 150px 0; */
	text-align: center;
	display: block;
}

.globalMenu.accordionMenu .navWrap h1.logo {
	width: 159px;
	margin: 0 auto;
	padding: 0 0 60px;
	background: url(/asset/img/nav_bg_logo.svg) no-repeat left top;
	background-size: 100% auto;
}

.globalMenu.accordionMenu .navWrap h1.logo a {
}

.globalMenu.accordionMenu .navWrap h1.logo a img {
}

.globalMenu.accordionMenu .navWrap ul {
	width: 159px;
	text-align: left;
	margin: 0 auto;
	background: url(/asset/img/nav_bg_menu.svg) no-repeat right bottom;
	background-size: 100% auto;
	padding: 0 0 1px 3px;
}

.globalMenu.accordionMenu .navWrap ul li {
	font-size: 1.3rem;
	font-family: "Playfair Display", serif;
	letter-spacing: 0.1em;
	margin-bottom: 30px;
	text-align: left;
}

.globalMenu.accordionMenu .navWrap ul li a {
	color: #000;
	text-decoration: none;
	position: relative;
	display: inline-block;
}

.globalMenu.accordionMenu .navWrap ul li a::before {
	content: "";
	display: block;
	width: 0%;
	height: 1px;
	background: #000;
	position: absolute;
	top: 50%;
	left: -5%;
	transition: all 0.4s ease-out 0s;
}

.globalMenu.accordionMenu .navWrap ul li a:hover::before {
	width: 110%;
}


/* アコーディオンボタン */
#accordionBtn {
}

#accordionBtn em {
}

/* アコーディオンメニュー用背景 */
#accordionBg {
}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 640px) {
nav.globalMenu {
}

.globalMenu {
}

.globalMenu .navWrap {
}

.globalMenu .navWrap .inner {
}

.globalMenu .navWrap h1.logo {
}

.globalMenu .navWrap h1.logo a {
}

.globalMenu .navWrap h1.logo a img {
}

.globalMenu .navWrap ul {
	width: 180px;
}

.globalMenu .navWrap ul li {
	margin: 0 0 10px 0;
	flex: 1 1 100px;
	text-align: right;
}

.globalMenu .navWrap ul li a {
}

.globalMenu .navWrap ul li a::before {
}

.globalMenu .navWrap ul li a:hover::before {
}

/* アコーディオンボタン */
#accordionBtn {
}

#accordionBtn em {
}

/* アコーディオンメニュー用背景 */
#accordionBg {
}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */




/* ==================================================
CONTENTS
================================================== */
#cntWrap {}

#cntWrap > section {}


/* ==================================================
FOOTER
================================================== */
footer#ftrArea {}

#ftrArea .inner {
	padding: 0 50px 60px;
	text-align: left;
}

#ftrArea .addressSet {
	font-size: 1.2rem;
	margin-bottom: 20px;
}

#ftrArea .addressSet .logo {
	width: 60px;
	margin-bottom: 25px;
}

#ftrArea .addressSet .logo img {
}

#ftrArea .addressSet .address1 {
	display: flex;
	justify-content: start;
	align-items: start;
	flex-wrap: wrap;
	flex-direction: row;
	margin-bottom: 0.6em;
}

#ftrArea .addressSet .address1 .tel {
	margin-right: 2em;
}

#ftrArea .addressSet .address1 .fax {
}

#ftrArea .addressSet .address2 {
}

#ftrArea .addressSet .address2 i {
	display: inline-block;
	margin-right: 0.5em;
}

#ftrArea .addressSet .address2 a.googleMap {
	display: inline-block;
	letter-spacing: 0.05em;
	font-style: italic;
	position: relative;
	padding: 0 5px;
	font-size: 90%;
	text-decoration: none;
}

#ftrArea .addressSet .address2 a.googleMap::after {
	content: "";
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: #000;
}

#ftrArea .copyright {
	/*font-family: "PT Sans Narrow", sans-serif;*/
	font-family: "Playfair Display", sans-serif;
	font-size: 1.3rem;
}


/* ### PAGE TOP ### */
#btnPagetop {
	width: 15px;
	height: 15px;
	position: fixed;
	bottom: -50px;
	right: 50px;
	z-index: 100;
	transition: all 0.4s ease-out 0s;
	/*opacity: 0;*/
}

#btnPagetop.veiwPagetop {
	bottom: 50px;
	/*opacity: 1;*/
}

/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 640px) {
#btnPagetop {
	right: 25px;
}

#btnPagetop.veiwPagetop {
	bottom: 25px;
}
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

#btnPagetop a {
	text-decoration: none;
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	border-top: 2px solid #000;
	border-left: 2px solid #000;
	transform: rotate(45deg);
	transition: all 0.4s ease-out 0s;
	opacity: 1;
}

#btnPagetop a::after {
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
	top: -20px;
	left: -20px;
	background: transparent;
}

#btnPagetop a:hover {
	-webkit-animation: movePagetop 1s infinite;
	animation: movePagetop 1s infinite;
}

@-webkit-keyframes movePagetop {
	0% {
		-webkit-transform: rotate(45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		-webkit-transform: rotate(45deg) translate(-6px, -6px);
		opacity: 0;
	}
}
@keyframes movePagetop {
	0% {
		transform: rotate(45deg) translate(0, 0);
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotate(45deg) translate(-6px, -6px);
		opacity: 0;
	}
}


/* ### ----- ### */


/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */


/* ==================================================
OTHERS
================================================== */

.scrollto {/* アニメーションスクロール jsを利用 */}

/* clrfix */
.clrfix::before, .clrfix::after { display: table; content: ''; }
.clrfix::after { clear: both; }


/*

<!-- ############################################################################################### -->
<!-- ############################################################################################### -->
<!-- ############################################################################################### -->
<!-- ############################################################################################### -->
<!-- ############################################################################################### -->
<!-- ##########　HTML コメントアウト記述ルール　#################################################### -->
<!-- ############################################################################################### -->
<!-- ############################################################################################### -->


<!-- ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ --> 
<!-- //////////////////////////////////////////////////////////////////// --> 
<!-- ///// メインコンテンツエリア（編集エリア） ///////////////////////// --> 
<!-- //////////////////////////////////////////////////////////////////// --> 

<!-- //////////////////////////////////////////////////////////////////// --> 
<!-- //////////////////////////////////////////////////////////////////// --> 
<!-- ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ --> 

<!-- ==================== 大ブロックエリア ==================== --> 
<!-- ==================== //大ブロックエリア ==================== --> 

<!-- ***** 中ブロックエリア *************** --> 
<!-- ***** //中ブロックエリア *************** --> 

<!-- #ID名 --> 
<!-- //#ID名 --> 

<!-- .class名 --> 
<!-- //.class名 --> 

<!-- [memo] --> 
<!-- //[memo] --> 


<!-- ※※※※※ INCLUDE - HEADER ※※※※※ --> 
<!--#include virtual="/asset/inc_header.html"--> 
<!-- ※※※※※ //INCLUDE - HEADER ※※※※※ --> 

<!-- ※※※※※ INCLUDE - FOOTER ※※※※※ --> 
<!--#include virtual="/asset/inc_footer.html"--> 
<!-- ※※※※※ //INCLUDE - FOOTER ※※※※※ --> 

<!--
[ id/class Name List ]
wrap > area > set > (group) > box

[ memmo ]
TOPページ → <body id="pageHome">
Newsページ(第2階層) → <body id="pageNews" class="dir2nd">
-->
*/


/* #################################################################################################### */
/* #################################################################################################### */
/* #################################################################################################### */
/* #################################################################################################### */
/* #################################################################################################### */
/* ##########　コメントアウト記述ルール　############################################################## */
/* #################################################################################################### */
/* #################################################################################################### */


/* //////////////////////////////////////////////////////////////////// */
/* ///// ブロック区切り /////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */

/* ==================================================
大見出し
================================================== */

/* 中見出し（他、説明など）
------------------------------ */

/* ### 小見出し 1 ### */
/* ### ----- ### */

/* 小見出し 2 */
/* ----- */


/* ### ↓MEDIAQUERY範囲指定 ※min以上 max以下 ### */
/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (min-width: 641px) and (max-width: 768px) {
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */

/* ### ↓MEDIAQUERY ※縦置き表示 ### */
/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (orientation: portrait) {
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* ### ↓MEDIAQUERY ※横置き表示 ### */
/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (orientation: landscape) {
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* ### ↓MEDIAQUERY ※min以上 ### */
/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (min-width: 769px) {
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* ### ↓MEDIAQUERY ※max以下 ### */
/* ############ ↓↓↓ MEDIAQUERY ↓↓↓ ############ */ @media screen and (max-width: 768px) {
} /* ############ ↑↑↑ MEDIAQUERY ↑↑↑ ############ */


/* ブレークポイント
900 768 640 540 420 */