@charset "UTF-8";

@import "layout.css";
@import "navi.css";
@import "top.css";
@import "list.css";
@import "detail.css";
@import "contents.css";
@import "original.css";

@import "searchbox.css";
@import "lightbox.css";
@import "top-add202307.css";
/*
@import "jquery-fontsize-switcher.css";
*/

focus {
	-moz-outline-style: none;
	}
a {
	outline: none;
	}

/************* ClearFix Styles *************/
/* Modern browsers like Firefox, Safari, Opera */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
    font-size: 0.1em;
    line-height: 0;
	}
/* IE 7 and MacIE*/
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

/************* Reset Styles *************/
* {
	margin: 0;
	padding: 0;
	}
p, caption, th, td, ul, ol, li, dl, dt, dd, form, input, textarea {
	font-family:"メイリオ", Meiryo, Osaka,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
	}
	@media screen and (max-width: 768px) {
		* {
			box-sizing: border-box; }
			 p, caption, th, td, ul, ol, li, dl, dt, dd, form, input, textarea {
				font-family: -apple-system-subset, Helvetica, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif } }
 th, td {
	margin: 0;
	font-size: 84%;
	}
th, td {
	font-size/**/: 100%;
	}
* html  * html th, * html td { 
	font-size: 84%;
	}

body {
    position: relative;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    /*background: #F4F4F4;*/
    color: #1A1A1A;
    font-weight: 500;
    font-size: clamp(0.875rem, 0.875rem + 0.5vw, 1rem);
    font-family: 'Noto Sans JP', sans-serif;
}

* {
	margin: 0;
	padding: 0;
	}

img {
	border: 0;
	}
h1, h2, h3, h4, h5, h6 {
font-style: normal;
font-weight: normal;
font-size: 100%;
	}
th {
font-style: normal;
font-weight: normal;
text-align: left;
	}
/************* Share Styles *************/
.clear {
	clear: both;
	}
.c_left {
	clear: left;
	}
.c_right {
	clear: right;
	}
.f_left {
	float: left;
	}
.f_right {
	float: right;
	}
.center {
	text-align: center;
	}
.right {
	text-align: right;
	}
.sp_only {
	display: none;
	}
	@media screen and (max-width: 768px) {
		img {
			max-width: 100%;
			height: auto; }
			.sp_none {
				display: none; }
			.sp_only {
				display: block; } }
	
.top0{
	margin-top:0 !important;
}

hr {
	clear: both;
	height: 1px;
	border-color: #FFF;
	line-height: 1em;
	margin-bottom: 1em;
	}

.square_btn{
    position: relative;
	display: block;
	width: 200px;
	padding: 1.3em;
	text-align: center;
	text-decoration: none;
	color: #FFF !important;
	background: #E65D5B;
	border-bottom: 2px solid #AC4948;
	border-radius: 4px;
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	margin: 0 auto;
  }

.square_btn:active {
    border-bottom: 2px solid #E65D5B;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

.h7 {
  overflow: hidden;
  text-align: center;
  font-size:20px;
  padding: 10px 10px;
  color:#F04B47;
}
.h7 span {
  position: relative;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  text-align: left;
}
.h7 span::before,
.h7 span::after {
  position: absolute;
  top: 50%;
  content: '';
  width: 150%;
  height: 1px;
  background-color: #F04B47;
}
.h7 span::before {
  right: 100%;
}
.h7 span::after {
  left: 100%;
}

/* ▼着物体験▼ */
.kimono > .top-image{
	margin-bottom: 50px;
}
.kimono > .top-image > a > img{
	width: 100%;
}
.kimono-contents{
	background-color: #F4E9E2;
    padding: 30px 50px;
	margin-bottom: 50px;
}
.kimono-contents > h2{
	text-align: center;
	padding-bottom: 10px;
}
.kimono-contents > ul{
	list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
	padding-bottom: 20px;
}
.kimono-contents > ul > li{
	width: 50%;
}
.kimono-contents > ul > li > a > img{
	width: 100%;
}
.kimono-contents > ul > li > p{
	line-height: 30px !important;
	font-size: 14px !important;
	padding-left: 20px !important;
}
.kimono-contents > h3{
	text-align: center;
}
.kimono-title{
	overflow: hidden;
    text-align: center;
    font-size: 20px;
    color: #F04B47;
    padding-bottom: 10px;
}
.kimono-title > span{
	position: relative;
    display: inline-block;
    margin: 0 2.5em;
    padding: 0 1em;
    text-align: left;
}
.kimono-title span::before{
	right: 100%;
}
.kimono-title span::after{
	left: 100%;
}
.kimono-title span::before, .kimono-title span::after{
	position: absolute;
    top: 50%;
    content: '';
    height: 1px;
    background-color: #F04B47;
    width: 830px;
}
.calendar{
	text-align: center;
}
.kimono-items{
	display: flex;
	list-style: none;
	flex-wrap: wrap;
}
.kimono-items > li{
    width: 33%;
    margin: 0 auto;
    text-align: center;
}
.kimono-items > li > p{
    text-align: left;
    padding: 10px 25px !important;
}
@media only screen and (max-width: 768px) {
	.kimono-contents{
		padding: 0px;
	}
	.kimono-contents > ul{
		flex-wrap: wrap;
	}
	.kimono-contents > ul > li{
		width: 100%;
	}
	#calendar_now iframe,#calendar_next iframe{
		width: 300px;
	}
	.kimono-contents ul:nth-of-type(1),.kimono-contents div:nth-child(1){
		padding: 10px;
	}
	.kimono-items > li > p{
		padding: 10px !important;
	}
}
/* ▲着物体験▲ */

@media only screen and (max-width: 768px) {
	/*.width100{
		width: 100% !important;
	}*/
	iframe{
		width: 100%;
	}
}



/* ▼768px以下▼ */
@media screen and (max-width: 768px) {
	.overflow-wrapper {
		width: 100%; 
		overflow: scroll;
	}
	
	.tablewidth-unset {
		width: unset !important;
		word-break: break-word;
	}
	
	.tablewidth-unset.data1 th{
		width: unset !important;
	}
	.font-regulation{
		font-size: 22px;
		line-height: 24px;
	}
	
	#scrolltop{
		bottom: 20px;
		right: 10px;
		position: fixed;
		z-index: 40;
	}
	#scrolltop a{
		text-decoration: none;
	}
	#scrolltop .scrolltop-btn{
		padding: 10px 0;
		margin-top: 10px;
		border-radius: 10px;
		width: 45px;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		box-shadow: 0 1px 2px rgba(51, 51, 51, 0.7);
		border: 1px solid #666666;
		background: #1256C2;
	}
	#scrolltop p{
		color: #FFF;
	}
	
	.amazing-img{
		/*background: rgba(0, 0, 0, 0.48);*/
		position: relative;
		text-align: left;
	}
	.amazing-img img{
		width: 100%;
		position: absolute;
		background: rgba(0, 0, 0, 0.48);
		padding: 10px 5px 0 5px;		
	}	
	
	li.accordion-item + ul{
		display:none;
	}
	
}

/* ▲768px以下▲ */
@media screen and (max-width: 768px) {
	.amazing-img img{
		top: -105px;
	}		
}
@media screen and (max-width: 600px) {
	.amazing-img img{
		top: -90px;
	}		
}
@media screen and (max-width: 500px) {
	.amazing-img img{
		top: -75px;
	}		
}@media screen and (max-width: 400px) {
	.amazing-img img{
		top: -60px;
	}		
}@media screen and (max-width: 370px) {
	.amazing-img img{
		top: -56px;
	}		
}

.btn-mapDetail{
	text-align: center;
    padding: 10px;
}
.btn-mapDetail a{
	display: inline-block;
    background: #255CD4;
    color: white;
    padding: 16px 30px;
    border-radius: 10px;
    width: 300px;
    text-align: center;
    text-decoration: none;
    border: solid 1px #255CD4;
    transition: 0.5s;
}
.btn-mapDetail a:hover{
    color: #255CD4;
    background: white;
    font-size: 120%;
}
.btn-mapDetail a .icon:before{
	content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(../images/icon_pdf_white.png);
    background-size: contain;
	background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 16px;
}
.btn-mapDetail a:hover .icon:before{
    background-image: url(../images/icon_pdf_blue.png);
}
@media screen and (max-width: 768px) {
	.btn-mapDetail a{
		padding: 8px 16px;
	}	
}

/*　▼タブ▼　*/

/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  width: 100%;
  margin: 0 auto;
}
/*タブのスタイル*/
.tabs .tab-item {
  width: calc(100%/2);
  height: 50px;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.5s ease;
  margin-bottom: 40px;
  position: relative;
  cursor: pointer;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab-item {
  	background-color: #2890D7;
  	color: #fff;
	font-size: 18px;
}
.tabs .tab-item:after{
	content: "";
    position: absolute;
    right: 0;
    bottom: -20px;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #2890D7 transparent transparent transparent;
    border-width: 10px 10px 10px 10px;
	transition: all 0.5s ease;
    opacity: 0;	
}
.tabs input:checked + .tab-item:after{
	opacity: 1;
}
.tabs input:not(:checked) + .tab-item {
  opacity: 0.8;
}
.tabs input:not(:checked) + .tab-item:hover {
  opacity: 1;
}
.tabs input[name="tab-item"] {
  display: none;
}
.tabs .tab-contents-wrap {
  display: none;
}
/*選択されているタブのコンテンツのみを表示*/
#south:checked ~ #south-contents,
#north:checked ~ #north-contents{
  display: block;
}
/*▼　タブ　スマホ表示　767px以下▼*/
@media only screen and (max-width: 767px) {
	.tabs{
		width: auto;
		padding-bottom: 0;
	}
	.tab-item {
		font-size: 14px;
	}
	.tabs input:checked + .tab-item {
		font-size: 16px;
	}

}
/*　▲タブ　スマホ表示　767px以下▲　*/
/*　▲タブ▲　*/

/*--------------------------------------------------
	ヘッダー
--------------------------------------------------*/
.site-header {
	/*position: fixed;
	top: 0;
	left: 0;
	z-index: 100;*/
	width: 100%;
	background: rgba(244, 244, 244, 0.92);
	transition: transform 0.3s ease;
}
.site-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: left;
	height: 80px;
	padding: 0 3.07692vw;
}
.site-header__logo {
	/*display: flex;
	align-items: center;
	justify-content: center;
	width: 54.35897vw;
	margin-right: calc((102px + 3.07692vw) - 9.74358vw);*/
}
.site-header__logo a {
	display: block;
	width: 90.59829%;
	max-width: 212px;
	height: auto;
}
@media (max-width: 374px) {
	.site-header__inner {
		height: 68px;
	}
}
@media (min-width: 480px) {
	.site-header__logo {
		margin-right: 0;
	}
}

@media (min-width: 768px) {
	.site-header__logo {
		margin-right: 0;
	}
}
@media (min-width: 1024px) {
	.site-header__inner {
		height: 90px;
		padding: 0 40px;
	}
	.site-header__logo a {
		max-width: 241px;
	}
	.site-header__logo img {
		width: 100%;
	}
}
/*--------------------------------------------------
	フッター
--------------------------------------------------*/
.site-footer {
	padding: 48px 5vw 24px;
	background: #FFFFFF;
	color: #1A1A1A;
}
.site-footer__bottom {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
	padding-top: 24px;
}
.site-footer__bottom-left {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.site-footer__brand {
	margin-top: 24px;
	margin-bottom: 24px;
}
.site-footer__contact {
	font-size: clamp(0.875rem, 0.829rem + 0.19vw, 1rem);
	line-height: 1.6;
    text-align: left;
}
.site-footer__address,
.site-footer__phone,
.site-footer__fax {
	margin-top: 2px;
}
.site-footer__phone {
	display: inline;
}
.site-footer__fax {
	display: inline;
	margin-left: 1em;
}
.site-footer__bottom-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/* コピーライト */
.site-footer__copyright {
	font-size: 0.6875rem;
	color: #707070;
	text-align: center;
}
@media (min-width: 960px) {
	.site-footer {
		padding-right: 5vw;
		padding-left: 5vw;
	}
	.site-footer__inner {
		max-width: 5vw;
		margin: 0 auto;
	}
}
@media (min-width: 768px) {
	.site-footer {
		padding: 48px 5vw 32px;
	}
    .site-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: 40px;
		margin-bottom: 32px;
		padding-top: 32px;
	}
	.site-footer__bottom-left {
		flex: 0 0 auto;
		align-items: flex-start;
	}
    .site-footer__brand {
		margin-top: 0;
	}
	.site-footer__brand-logo {
		font-size: 1.75rem;
		margin-bottom: 8px;
	}
    .site-footer__copyright {
		font-size: 0.75rem;
		text-align: right;
	}
}
@media (min-width: 960px) {
	.site-footer {
		padding-right: 5vw;
		padding-left: 5vw;
	}
	.site-footer__inner {
		max-width: 1056px;
		margin: 0 auto;
	}
}
@media (min-width: 1440px) {
	.site-footer {
		padding-right: 8vw;
		padding-left: 8vw;
	}
}