@charset "utf-8";

@import url("reset.css");
@import url("bootstrap.css");
@import url("fontawesome-all.min.css");
@import url("jquery.fatNav.css");

/* ==================================================
   basic design
*/

body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

html {
	font-size: 62.5%;
}
body {
	color: #222;
	font-size: 1.5em;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	-webkit-font-smoothing: antialiased;
	letter-spacing: 0.1rem;
	background: #fff;
}

header, footer, section, nav, h1, h2, h3, h4, h5, p, ul, ol, li, table, thead, tbody, tr, th, td {
	line-height: 1.6;
}

p {
	text-align: justify;
	text-justify: inter-ideograph;
}


/* ==================================================
   font
================================================== */

.font_bold {
	font-weight: 600 !important;
}
.font_xl {
	font-size: 2.1rem !important;
}
.font_l {
	font-size: 1.7rem !important;
}
.font_s {
	font-size: 1.2rem !important;
}
.font_mincho {
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif !important;
}

@media (min-width: 992px) {
	.font_xl {
		font-size: 2.4rem !important;
	}
	.font_l {
		font-size: 2.0rem !important;
	}
	.font_m {
		font-size: 1.7rem !important;
	}
}


/* ==================================================
   color
================================================== */

.main_color {
	color: #177688 !important;
}
.white_color {
	color: #fff !important;
}
.red_color {
	color: #c20 !important;
}
.gray_color {
	color: #808080 !important;
}


/* ==================================================
   Anchor
================================================== */

a,
a:link,
a:visited,
a:active {
	color: #177688;
	text-decoration: none;
}

a,
a > img {
	opacity: 1;
	filter: alpha(opacity=100);

	-webkit-transition: opacity 0.3s ease-in-out 0s;	
	   -moz-transition: opacity 0.3s ease-in-out 0s;
		 -o-transition: opacity 0.3s ease-in-out 0s;
		    transition: opacity 0.3s ease-in-out 0s;	
}

a:hover,
a:hover > img {
	opacity: 0.8;
	filter: alpha(opacity=80);
}

a:focus, *:focus { outline:none; }

@media (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
		color: #222 !important;
	}
}

.a_link::before,
.a_up::before,
.a_down::before,
.a_map::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
.a_link::before {
	content: "\f35a\0020";
}
.a_up::before {
	content: "\f0aa";
}
.a_down::before {
	content: "\f0ab";
}
.a_map::before {
	content: "\f3c5\0020";
}


/* ==================================================
   Button
================================================== */

.button {
	min-width: 19.6rem;
	border: 1px solid #177688;
	border-radius: 5px;
	color:#fff !important;
	font-weight: 600;
	letter-spacing: 0.2rem;
	background: #10c2cd;
	background: linear-gradient(to bottom, #198093, #1d94aa 75%);
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
	position: relative;
	padding: 15px;
	display: inline-block;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: .3s;
}
@media (min-width: 768px) {
	.button {
		font-size: 1.7rem !important;
	}
}
.button::before,
.button::after{
	position: absolute;
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	left: calc(50% - 5px);
	top: calc(50% - 5px);
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	transform: scale(0,0);
}
.button:active{
	opacity: .7;
}
.button:hover::before{
	animation: hamon 2s infinite;
}
.button:hover::after{
	animation: hamon 2s .3s infinite;
}
@keyframes hamon {
	0%   {  transform: scale(0,0);}
	100% {  transform: scale(50,50);opacity: 0;}
}


/* ==================================================
   Header
================================================== */

header {
	width: 100%;
	background: rgba(255,255,255,0.3);
	z-index: 100;
}

.snav,
.gnav,
.gnav_menu {
    display: none;
}

@media (min-width: 992px) {
	.hamburger {
		display: none;	
	}
	.snav {
		display: block;
		text-align: right;
		font-size: 1.2rem;
	}
	.gnav,
	.gnav_menu {
		/*display: block;*/
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	.gnav_menu li {
		display: inline-block;
		width: 16.666%;
		/*width: 14.285%;*/
		border-left: 1px solid #177688;
	}
	.gnav_menu li a {
		display: block;
		font-weight: 600 !important;
		text-align: center;
		text-decoration: none;
		padding: 1rem .5rem;
	}
	.gnav_menu li.current a {
		color: #fff;
		background: #177688;
	}
	.gnav_menu li a:hover {
		color: #177688;
		/*background: rgba(145,221,237,0.3);*/
		background: #bbe9f5;
	}
	/*.gnav_menu li:last-child a {
		color: #fff !important;
		letter-spacing: 0.2rem;
		background: #177688;
	}*/
	.gnav_menu li:last-child {
		border-right: 1px solid #177688;
	}
	.clone-nav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		transition: .3s;
		transform: translateY(-100%);
	}
	.is-show {
		background: rgba(255,255,255,0.9);
		transform: translateY(0);
		box-shadow: 0px 5px 10px -5px rgba(0,0,0,0.3);
	}
}


/* ==================================================
   Contents
================================================== */

#contents {}

.pagetitle {
	color: #fff;
	font-weight: 600;
	text-align: center;
	height: 100px;
	padding-top: 20px;
	background: #177688 url(../img/site/pagetitle_btm.png) no-repeat bottom center;
	background-size: contain;
	margin-bottom: 3rem;
}

@media (min-width: 992px) {
	.pagetitle {
		height: 200px;
		padding-top: 70px;
	}
}


/* ==================================================
   HOME
================================================== */

.bg_slider {
    position: relative;
    width: 100%;
}
.slider_btm {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 184px;
	background: url(../img/site/pagetitle_btm.png) no-repeat bottom center;
	background-size: contain;
}

.box_topics {
	padding: 15px;
	border: 1px solid #177688;
	border-radius: 5px;
	box-shadow: 0 0 5px 2px #b9d6db inset;
}

.sec_home_item {
	padding: 0 0 60px 0;
	background: url(../img/home/sec_home_item.jpg);
	background-size: cover;
}

.teiban_wrap {
	position: relative;
	margin-top: 60px;
}
.zoutou_wrap {
	position: relative;
	margin-top: 90px;
}
.teiban_wrap h2,
.zoutou_wrap h2 {
	position: absolute;
	top: -80px;
}
.teiban_wrap h2 {
	left: 0;
}
.zoutou_wrap h2 {
	right: 0;
}
.teiban_wrap h2 img,
.zoutou_wrap h2 img {
	width: 100px;
}

.teiban_wrap a:hover,
.teiban_wrap a:hover > img,
.zoutou_wrap a:hover,
.zoutou_wrap a:hover > img {
	opacity: 0.8;
	filter: alpha(opacity=80);	
}

.box_teiban,
.box_zoutou {
	padding: 15px;
	background: #fff;
	border-radius: 5px;
}
.box_teiban p,
.box_zoutou p {
	margin: 15px 0;
	color: #222 !important;
}

@media (min-width: 768px) {
	.teiban_wrap,
	.zoutou_wrap {
		position: relative;
		margin-top: 60px;
	}
	.teiban_wrap h2 img,
	.zoutou_wrap h2 img {
		width: 125px;
	}
	.box_teiban {
		width: 85%;
		margin-left: 15%;
	}
	.box_zoutou {
		width: 85%;
		margin-right: 15%;
	}
}

@media (min-width: 992px) {
	.teiban_wrap h2 img,
	.zoutou_wrap h2 img {
		width: 100%;
	}
}

.info_wrap {
	padding: 200px 15px 15px 15px;
	background: #84d9eb url(../img/home/info_sp.jpg) no-repeat 0 0;
	background-size: contain;
	border-radius: 5px;
}
.info {
	padding: 15px;
	background: #fff;
	background: rgba(255,255,255,0.8);
	border-radius: 5px;
}

@media (min-width: 576px) {
	.info_wrap {
		background-size: cover;
		padding: 200px 30px 30px 30px;
	}
	.info {
		padding: 30px;
	}
}

@media (min-width: 768px) {
	.info_wrap {
		padding: 60px 30px;
		background: #84d9eb url(../img/home/info_pc.jpg) no-repeat 0 0;
		background-size: cover;
	}
}


/* ==================================================
   Shirasu
================================================== */

.box_point {
	padding: 15px;
	border: 1px solid #177688;
	border-radius: 5px;
	background: linear-gradient(to bottom, #dff7fd, #fff 25%);
}

.box_point h4 {
	color: #177688;
	font-weight: 600;
	letter-spacing: .25rem;
}
.box_point p {
	padding: 15px 0;
}

.box_trivia {
    position: relative;
	margin-top: 3.2rem;
    padding: 1.4rem;
    border: solid 2px #177688;
}
.box_trivia h3 {
    position: absolute;
    display: inline-block;
    top: -3.2rem;
    left: -2px;
    padding: 0 1.4rem;
    height: 3.2rem;
    line-height: 3.2rem;
    vertical-align: middle;
    background: #177688;
    color: #fff;
    font-weight: 600;
    border-radius: 5px 5px 0 0;
}


/* ==================================================
   Item
================================================== */

.box_item {
	padding: 15px;
	border: 1px solid #177688;
	border-radius: 5px;
	background: linear-gradient(to bottom, #dff7fd 40%, #fff);
}
.box_item h3 {
	color: #177688;
	font-weight: 600;
	background: #fff;
	padding: 5px 10px;
}
.box_item .price {
	color: #177688;
	font-weight: 600;
}
.box_item table {
	width: 100%;
}
.box_item table tbody th,
.box_item table tbody td {
	padding: .8rem;
	font-size: 1.2rem !important;
}
.box_item table tbody th {
	white-space: nowrap;
	background: #e7f1f3;
	border: 1px solid #1ccccc;
}
.box_item table tbody td {
	background: #fff;
	border: 1px solid #1ccccc;
}
.box_item ul li {
	font-size: 1.2rem !important;
}

.slider {}
.slider img {
	width: 100%;
	height: auto;
}
.slick-prev::before, .slick-next::before {
	font-size: 24px;
}
.thumb-item-nav .slick-next {
	right: 20px;
	z-index: 99;
}
.thumb-item-nav .slick-prev {
	left: 15px;
	z-index: 100;
}
.thumb-item,
.thumb-item-nav {
	max-width: 700px;
	margin: 0 auto;
}
.thumb-item li,
.thumb-item-nav li {
	margin: 5px;
}

.new_item {
	position: relative;
}
.new_item::before {
	content: "";
	top: 0;
	right: 0;
	border-bottom: 2em solid transparent;
	border-right: 2em solid #c20;
	position: absolute;
	z-index: 100;
}
.new_item::after {
	content: "New";
	display: block;
	top: 5px;
	right: 0;
	transform: rotate(45deg);
	color: #fff;
	font-size: 10px;
	position: absolute;
	z-index: 101;
}


/* ==================================================
   Supplement
================================================== */

.bg_wood {
	background: url(../img/supplement/bg_wood.jpg);
	padding-bottom: 60px;
}

.bg_chalkboard {
	background: url(../img/supplement/bg_chalkboard.jpg);
}

#chalkboard {
	position: relative;
}

#doc {
	position: absolute;
	right: 0;
	width: 100%;
	text-align: right;
	padding-left: 30px;
}

.wrap_chalkboard {
	color: #fff;
	padding: 15px;
}
.wrap_chalkboard p {
	line-height: 1.75;
}
.wrap_chalkboard .pink_text {
	color: #f6c2d9;
}
@media (min-width: 576px) {
	.wrap_chalkboard {
		padding: 30px;
		font-size: 1.8rem;
	}
}
@media (min-width: 992px) {
	.wrap_chalkboard {
		padding: 30px 100px;
		font-size: 2.25rem;
	}
}

.ol_marumoji {
	list-style: none;
	margin-left: 2rem;
}
.ol_marumoji li {
	color: #f6c2d9;
	text-indent: -2rem;
	font-size: 2rem;
}
@media (min-width: 992px) {
	.ol_marumoji {
		margin-left: 3rem;
	}
	.ol_marumoji li{
		text-indent: -3rem;
		font-size: 3rem;
	}
}


/* ==================================================
   About us
================================================== */

.table_aboutus {
	width: 100%;
}
.table_aboutus th {
	color: #177688;
	text-align: left;
	font-weight: 600;
}
.table_aboutus th,
.table_aboutus td {
	border-top: 1px solid #b9d6db;
	padding: .8rem;
}
.table_aboutus tr:last-child td,
.table_aboutus tr:last-child th {
	border-bottom: 1px solid #b9d6db;
}

@media (min-width: 768px) {
	.table_aboutus th,
	.table_aboutus td {
		padding: 1.6rem;
	}
}

#map {
	width: 100%;
	height: 400px;
}

/* ==================================================
   Order
================================================== */

.box_basic {
	padding: 15px;
	border: 1px solid #177688;
	border-radius: 5px;
}

.table_carriage {
	width: 100%;
	font-size: 1.2rem;
}
.table_carriage thead th,
.table_carriage thead td,
.table_carriage tbody th,
.table_carriage tbody td {
	padding: .8rem;
}
.table_carriage thead th,
.table_carriage thead td {
	color: #fff;
	text-align: center;
	background: #177688;
	border: 1px solid #fff;
}
.table_carriage tbody th {
	background: #e7f1f3;
	border: 1px solid #177688;
}
.table_carriage tbody td {
	text-align: right;
	border: 1px solid #177688;
}

@media (max-width: 767px) {
	.table_carriage {
		display: block;
	}
	.table_carriage thead {
		display: none;
	}
	.table_carriage tbody {
		display: block;
	}
	.table_carriage tbody tr {
		display: block;
		margin-bottom: .8rem;
	}
	.table_carriage tbody th,
	.table_carriage tbody td {
		display: list-item;
		border: none;
	}
	.table_carriage tbody th {
		margin-bottom: .8rem;
		list-style-type: none;
		color: #fff;
		background: #177688;
	}
	.table_carriage tbody td {
		padding: 0;
		text-align: left;
		list-style-type: none;
	}
	.table_carriage tbody td:nth-of-type(1):before { content: "［北海道］"; }
	.table_carriage tbody td:nth-of-type(2):before { content: "［北東北：青森・岩手・秋田］"; }
	.table_carriage tbody td:nth-of-type(3):before { content: "［南東北：宮城・山形・福島］"; }
	.table_carriage tbody td:nth-of-type(4):before { content: "［関東：茨木・群馬・千葉・神奈川・栃木・埼玉・東京・山梨］"; }
	.table_carriage tbody td:nth-of-type(5):before { content: "［信越：新潟・長野］"; }
	.table_carriage tbody td:nth-of-type(6):before { content: "［北陸：富山・石川・福井］"; }
	.table_carriage tbody td:nth-of-type(7):before { content: "［中部：岐阜・静岡・愛知・三重］"; }
	.table_carriage tbody td:nth-of-type(8):before { content: "［関西：滋賀・大阪・奈良・京都・兵庫・和歌山］"; }
	.table_carriage tbody td:nth-of-type(9):before { content: "［中国：鳥取・岡山・山口・島根・広島］"; }
	.table_carriage tbody td:nth-of-type(10):before { content: "［四国：徳島・香川・愛媛・高知］"; }
	.table_carriage tbody td:nth-of-type(11):before { content: "［九州：福岡・長崎・大分・鹿児島・佐賀・熊本・宮崎］"; }
	.table_carriage tbody td:nth-of-type(12):before { content: "［沖縄］"; }
}

/* ==================================================
   h3 / h4
================================================== */

.h_center {
	margin-top: 5rem;
	text-align: center;
	position: relative;
	padding: 1rem 0 2rem 0;
}
.h_center::before {
    content: '';
    position: absolute;
	top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    margin: 0 auto;
    text-align: center;
    background-image: -webkit-linear-gradient(left, transparent, #b9d6db 25%, #b9d6db 75%, transparent);
    background-image: linear-gradient(to right, transparent, #b9d6db 25%, #b9d6db 75%, transparent);
    background-position: center;
    background-repeat: no-repeat;
}
.h_center::after {
	position: absolute;
	top: -2px;
	left: 35%;
	z-index: 2;
	content: '';
	width: 30%;
	height: 3px;
	background-color: #177688;
}

.h_basic {
	color: #177688;
	font-size: 2rem !important;
	font-weight: 600;
	position: relative;
	padding-left: 30px;
}
.h_basic::before,
.h_basic::after {
	position: absolute;
	content: '';
	border-radius: 100%
}
.h_basic::before {
	top: .2em;
	left: .2em;
	z-index: 2;
	width: 18px;
	height: 18px;
	background: rgba(23, 118, 136, .5);
}
.h_basic::after {
	top: .7em;
	left: .7em;
	width: 13px;
	height: 13px;
	background: rgba(23, 118, 136, .3);
}

.h_topics {
	position: relative;
	font-weight: 600;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-top: 1px solid #b9d6db;
}
.h_topics::before {
	position: absolute;
	top: -2px;
	left: 6px;
	z-index: 2;
	content: '';
	width: 30%;
	height: 3px;
	background-color: #177688;
}
.h_topics::after {
	position: absolute;
	content: '';
	border-radius: 100%;
	top: -3px;
	left: 0;
	width: 5px;
	height: 5px;
	background: #84d9eb;
}


/* ==================================================
   ul / ol
================================================== */

ul {
	list-style: none;
}

.ul_basic {
	margin-left: 1rem;
}
.ul_basic li {
	list-style-type: disc;
}

.ul_notice {
	padding-left: 1rem;
	padding-bottom: 0.25rem;
	text-indent: -1rem;
}
.ul_notice li::before {
	font-family: FontAwesome;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f005\00a0";
	color: #c20;
	font-size: .71rem;
}

.ul_inline li {
	display: inline-block;
	padding: 0 15px;
}

.ol_basic {
	margin-left: 1.5rem;
}
.ol_basic li {
	list-style-type: decimal;
}

/* ==================================================
   Table
================================================== */

.table_basic {
	width: 100%;
	background: #fff;
}
.table_basic th {
	width: 25%;
	text-align: left;
}
.table_basic thead th,
.table_basic thead td,
.table_basic tbody th,
.table_basic tbody td {
	padding: 1.6rem;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.table_basic thead th,
.table_basic thead td {
	font-weight: 600;
	text-align: center;
}
.table_basic tbody th {
	font-weight: 600;
	background: #fafafa;
}

@media (max-width: 768px) {
	.table_basic {
		border-bottom: 1px solid #ccc;
	}
	.table_basic thead th,
	.table_basic thead td,
	.table_basic tbody th,
	.table_basic tbody td {
		width: 100%;
		display: block;
		padding: .8rem;
	}
	.table_basic tbody th {
		background: #fafafa;
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		border-bottom: none;
	}
	.table_basic tbody td {
		border-top: none;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		border-bottom: none;
	}
}


/* ==================================================
   Footer
================================================== */

footer {
	margin-top: 3rem;
	padding-bottom: 40px;
	position: relative;
}
footer h3 img {
	width: 210px;
	height: 55px;
}

#canvas-container {
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: -100;
}
canvas {
    width: 100%;
    height: 300px;
    vertical-align: bottom;
}

#credits {
	font-family: sans-serif;
	font-size: 1rem;
}

#pagetop {
	display: none;
	cursor: pointer;
	margin: 0;
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	z-index: 99;
	-webkit-transition: 0.1s linear 0s;	
	   -moz-transition: 0.1s linear 0s;
		 -o-transition: 0.1s linear 0s;
		    transition: 0.1s linear 0s;
}

@media (min-width: 1200px) {
	footer {
		padding-bottom: 70px;
	}
	#pagetop {
		bottom: 15px;
		right: 15px;
		width: 70px;
		height: 70px;
	}
}