@charset "utf-8";

/* ===============================================================================
Reset
=============================================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}
/* ===============================================================================
Body Setting
=============================================================================== */
html, body {
  font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  line-height: 1.8;
  color: #ffffff;
  height: 100%;
}
/* ===============================================================================
Common
=============================================================================== */
.album a:hover img{
	opacity: 0.4;
}
.spOnly{
	display: none;
}
hr{
	max-width: 1000px;
	border-top: dotted 0.25em #46321e;
}
.btn-permeate:hover{
	opacity: 0.4;
}
.btn-permeate{
	-webkit-transition: opacity .3s;
	-moz-transition: opacity .3s;
	-ms-transition: opacity .3s;
	-o-transition: opacity .3s;
	transition: opacity .3s;
}
@media screen and (max-width: 640px) {
	br{
		display: none;
	}
	hr{
		width: 96%;
	}
	.pcOnly{
		display: none;
	}
	.spOnly{
		display: block;
	}
	.sp-br{
		display: block;
	}
}
/* ===============================================================================
main visual
=============================================================================== */
.mv{
	position: relative;
	width: 100vw;
    height: 100vh;
	background-color: #2d0f00;
	overflow: visible;
	z-index: -1;
}
.mv_img{
	background: url(../images/main-pc.jpg) no-repeat top center;
	background-size: cover;
	width: 100vw;
    height: 100vh;
	position: fixed;
	z-index: -1;
}
.mv h1{
	opacity: 1;
	position: absolute;
	top:40%;
	width: 100vw;
	text-align: center;
}
.mv h1 img{
	width: 62%;
}
.animated1{
  -webkit-animation-duration: 3.5s;
  animation-duration: 3.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated2{
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.down_link{
	position: absolute;
	top: 90%;
	left: 48%;
}
.down_link img{
	width: 3em;
}
.down_link_space{
	margin-top: -10em !important;
}
@media screen and (max-width: 768px) {
	.mv h1 img{
		width: 80%;
	}

}
@media screen and (max-width: 640px) {
	.mv{
		height: 100vh;
		height: calc(var(--vh, 1vh) * 100);
	}
/*	.mv_img{
		background: url(../images/main-sp.jpg) no-repeat center center;
		background-size: cover;
		height: 88vh;
		max-width: 100%;
	} */
	.mv_img::before {
		content: "";
		background: url(../images/main-sp.jpg) no-repeat center center;
		background-size: cover;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		height: calc(var(--vh, 1vh) * 100);
		z-index: -1;
	}
	.mv h1{
		top:27vh;
		top: calc(var(--vh, 1vh) * 27);
	}
	.mv h1 img{
		margin:0 auto;
	}
	.down_link{
		top:95vh;
		top: calc(var(--vh, 1vh) * 90);
		left: 42.8%;
	}
	.down_link_space{
		margin-top: -7.2em !important;
	}

}
/* ===============================================================================
yodogawa
=============================================================================== */
.article-lead{
	width: 100%;
	font-size: 1.125em;
}
.article-lead p{
	max-width: 500px;
	margin: 0 auto;
	padding:5em 10em;
	letter-spacing: 0.2em;
	line-height: 2.2em;
}
.text1{
	background: url(../images/obj_1.png) no-repeat top right;
	color: #46321e;
	background-position: 66% 20.75%;
    background-size: 6.5em;
	background-color: rgba(255,255,255,0.9);
}
.text2{
	background: url(../images/obj_2.png) no-repeat top right;
	background-position: 70% 10%;
    background-size: 15em;
	background-color: rgba(97,58,15,0.92);
}
.text2 a{
	color: #FFEB32;
}

@media screen and (max-width: 768px) {
	.article-lead p{
		padding: 5em 0;
	}
	.text1{
		background-position: 75% 20.75%;
	}
}
@media screen and (max-width: 640px) {
	.article-lead p{
		padding: 5.25em 1em 2em;
		letter-spacing: 0.05em;
		line-height: 2em;
	}
	.text1{
		background-position: 50% 7%;
		background-size: 4.5em;
	}
	.text2{
		background-position: 45% 0%;
	}

}
/* ===============================================================================
Album
=============================================================================== */
.album{
	background: url(../images/bg_album.jpg) repeat;
}
.album h3{
	padding: 5em 0 2em;
}
.album_contents{
	max-width: 960px;
	margin:0 auto;
	padding-bottom: 4em;
}
.sanpo{
	background: url(../images/bg_sanpo.png) no-repeat fixed;
	background-position: 80% 5%;
    background-size: 70%;
}
.ball{
	background: url(../images/bg_ball.png) no-repeat fixed;
	background-position: 88% 5%;
    background-size: 70%;
}
.harappa{
	background: url(../images/bg_harappa.png) no-repeat fixed;
	background-position: 90% 5%;
    background-size: 50%;
}
.photo{
	display: flex;
	flex-wrap: wrap;
	align-content: stretch;
	justify-content: space-between;
	align-items: center;
}
.photo a{
	display: contents;
}
.photo img{
	width: 9.5em;
	border:0.5em solid #ffffff;
	margin: 1.2em 1em;
}
.photo img.photo_l{
	width: 12em;
}
.photo img.photo_s{
	width: 8em;
}
.album h3 img{
	width: 17em;
}
.album .title_ball img{
	width: 19em;
}
@media screen and (max-width: 640px) {
	.album_contents{
		padding-bottom: 1em;
	}
	.album h3{
		text-align: center;
		padding: 1.75em 0 1em;
	}
	.album h3 img{
		width: 12.375em;
	}
	.album .title_ball img{
		width: 13.375em;
	}
	.sanpo, .ball, .harappa{
		background: none;
	}
	.photo{
		padding: 0 0.5em;
	}
	.photo img,
	.photo img.photo_l,
	.photo img.photo_s{
		width: 47%;
		margin: 0.4em 0;
		border: 0.2em solid #ffffff;
	}
}
/* ===============================================================================
Products
=============================================================================== */
.article-content{
	font-family: '-apple-system','Helvetica Neue','Segoe UI','Hiragino Kaku Gothic ProN',meiryo,'M+ 1p',sans-serif;
	background-color: #ffffff;
}
.products{
	text-align: center;
	margin: 0 auto 4em;
	max-width: 960px;
}
.products-title{
	color: #734d3e;
	font-size: 1.125em;
	font-weight: bold;
	max-width: 960px;
    margin: 0 auto;
	padding: 5em 0 2em 2em;
	display: flex;
	align-items: center;
}
.products-title .box{
	color: #000;
	font-size: 0.813em;
	background-color: #f8caa0;
	border-radius: 0.5em;
	padding: 0.1em 0.8em;
    margin-left: 1em;
}
.products > ul.column-4{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.products > ul{
	letter-spacing: 0;
	font-size: 0;
}
.products > ul > li{
	display: inline-block;
	width: 22.4em;
	vertical-align: top;
	font-size: 10px;
	padding: 0 2em 3.2em;
	text-align: left;
}
.products > ul > li:hover{
	opacity: 0.4;
}
a.btn-slide{
	cursor: pointer;
	text-decoration: none;
}
.btn-slide{
	position: relative;
	display: block;
}
.btn-slide dl{
	overflow: hidden;
}
.btn-slide dl dt{
	position: relative;
	overflow: hidden;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	padding-top: 100%;
	border-bottom: .4em #f27f0c solid;
	background: url(/store/techo/2019/images/loading3.gif)50% 50% no-repeat;
	-webkit-background-size: 3.2em 3.2em;
	-moz-background-size: 3.2em 3.2em;
	background-size: 3.2em 3.2em;
}
.btn-slide dl dt>img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity .3s linear;
	-moz-transition: opacity .3s linear;
	-ms-transition: opacity .3s linear;
	-o-transition: opacity .3s linear;
	transition: opacity .3s linear;
}
.btn-slide dl dd{
	font-weight: 700;
	position: relative;
	overflow: hidden;
	padding: .4em .8em 0;
	color: #1e1933;
	border-bottom: .1em #d2d1d6 solid;
}
.btn-slide dl dd:nth-of-type(1){
	height: 7.6em;
}
.btn-slide dl dd:nth-of-type(1) span{
	font-size: 12px;
	line-height: 1.75;
	display: block;
	overflow: hidden;
	height: 1.75em;
}
.btn-slide dl dd:nth-of-type(1) strong{
	font-size: 14px;
	line-height: 1.5;
	display: block;
	overflow: hidden;
	max-height: 3em;
}
.btn-slide dl:first-child dd:last-child{
	-webkit-transition: border .3s cubic-bezier(.165,.84,.44,1);
	-moz-transition: border .3s cubic-bezier(.165,.84,.44,1);
	-ms-transition: border .3s cubic-bezier(.165,.84,.44,1);
	-o-transition: border .3s cubic-bezier(.165,.84,.44,1);
	transition: border .3s cubic-bezier(.165,.84,.44,1);
}
.btn-slide dl dd:nth-of-type(2){
	height: 9.3em;
}
.btn-slide dl p{
	font-size: 12px;
	line-height: 1.75;
}
.btn-slide ol li small{
	display: inline;
}
.products-text{
	background-color: #613a0f;
}
.products-contents{
	display: flex;
	max-width: 650px;
	margin: 0 auto;
	padding: 3em 0;
	font-weight: bold;
    letter-spacing: .2em;
}
.products-text p img{
	width: 5.5em;
}
.products-text p{
	padding-left: 2em;
	font-size: 1.125em;
	line-height: 2;
}
@media screen and (max-width: 768px) {
	.products > ul > li{
		width: 21.4em;
	}
}
@media screen and (max-width: 640px) {
	.products{
		width: 96%;
	}
	.products-title{
		padding: 2em 1.5em 1em;
	}
	.products > ul > li{
		width: 44%;
		padding: 0 .8em 1em;
	}
	.products-contents{
		display: block;
		width: 98%;
		padding: 2em 0;
	}
	.products-text p{
		padding: 0 .5em;
	}
	.products-contents p:first-of-type{
		text-align: center;
	}
	.btn-slide dl dd:nth-of-type(2){
		font-size: 11px;
	}
}
@media screen and (max-width: 640px) {
	.products-title{
		padding: 2em .5em 1em;
	}
	.products-title .box{
		padding: 0.1em 0.5em;
		margin-left: 0.5em;
	}
}
/* ===============================================================================
footer
=============================================================================== */
.article-footer{
	font-family: '-apple-system','Helvetica Neue','Segoe UI','Hiragino Kaku Gothic ProN',meiryo,'M+ 1p',sans-serif;
	margin:0 auto;
	padding: 4em 0 0;
}
.article-navi{
	text-align: center;
	color: #ad6118;
}
.article-navi a{
	color: #ad6118;
	font-weight: bold;
}
.article-share{
	margin: 0 auto;
    padding: 4em 0;
    max-width: 560px;
	text-align: center;
}
.article-share ul{
	display: inline-block;
    padding: 1.8em;
    border: 1px solid #c7c7c7;
    width: 88%;
}
.article-share ul::before{
	display: block;
    font-size: 0.75em;
    font-weight: bold;
    line-height: 2.5;
    content: 'この記事をシェアする';
    color: #666;
    margin-bottom: 1em;
}
.article-share ul li{
	display: inline-block;
    margin: 0 1.8em;
    vertical-align: top;
}
.article-share img{
	width: 1.875em;
}
.article-date{
	text-align: center;
	color: #000;
	font-size: 0.75em;
	padding-bottom: 6em;
}
.bottom{
    height: 6em;
    background: #f27f0c;
}
.bottom p{
	max-width: 960px;
	margin:0 auto;
	padding-top: 3%;
}
.bottom a,
.bottom small{
	display: block;
	font-size: 0.75em;
    font-weight: 700;
    line-height: 1.5;
    top: 50%;
}
.bottom small{
	float: left;
}
.bottom a{
	float: right;
	color: #ffffff;
}
@media screen and (max-width: 768px) {
	.bottom p{
		padding: 6% 3%;
	}
}
@media screen and (max-width: 640px) {
	.article-share ul{
		width: 75%;
	}
	.article-share ul li{
		margin: 0 1em;
	}
	.bottom{
		height: 3.5em;
	}
}