@charset "utf-8";

*{
	margin:0;
	padding:0;
	box-sizing: border-box;	
}

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, font, 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, section, article, aside, hgroup, header, footer, nav, dialog, figure, menu, video, audio, mark, time, canvas, details {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align:baseline;
	background: transparent;
}

article, aside, canvas, details, figcaption, figure, header,
footer, hgroup, menu, nav, section, summary {
display: block;
}

@media only screen and 
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
  .hoge {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

ol, ul {
	list-style: none;
}

address,caption,cite,code,dfn,em,strong,var {
	font-style: 600;
}

caption,th {
	text-align: left;
	font-weight:600;
}

q:before,q:after {
	content: '';
}

object,
embed {
	vertical-align: top;
}

textarea,th {
	font-size: 100%;
	font-weight: normal;
}

img,abbr,acronym,fieldset {
	border: 0;
}

img{
	max-width: 100%;
	height: auto;
	line-height: 1;
}

table {
	font-size:100%;
	border-collapse: collapse;
	border-spacing: 0;
	vertical-align:top;
}

h1,h2,h3,h4,h5{
	font-weight: 300;
}



/* For modern browsers */
.cf:before,
.cf:after,
.contact_det li:before,
.contact_det li:after,
.contact_det-btn li:before,
.contact_det-btn li:after {
    content:"";
    display:table;
}
 
.cf:after,
.contact_det li:after,
.contact_det-btn li:after {
    clear:both;
}

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

/*--- リンクカラー */
a:hover {
	text-decoration: none;
}

.clm-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}



/* -----------------------------------------------------------

	ページ共通設定
	
----------------------------------------------------------- */


body {
	width: 100%;
	opacity: 0;
	transition: opacity .6s ease;
}

body.load-on {
    opacity: 1;
}

body.fadeout{
	opacity: 0!important;
}

body.disable-transition * {
  transition: none !important;
}

.fadein{
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) .4s;
    opacity: 0;
}

.fadein.view{
	opacity: 1;
}

.i-fadein{
    -webkit-mask-image: linear-gradient(270deg, transparent 35%, #000 60%, #000);
    mask-image: linear-gradient(270deg, transparent 35%, #000 60%, #000);
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    -webkit-mask-size: 250% 100%;
    mask-size: 250% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: 0;	
}

.i-fadein.view{
    transition: opacity 1.8s, -webkit-mask-position 2.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: opacity 1.8s, mask-position 2.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: opacity 1.8s, mask-position 2.2s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-mask-position 2.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    opacity: 1;
}

.t-fadein span {
	display: block;
    opacity: 0;
    transform: rotateY(-10deg) translateY(20px) scaleY(0.94) skew(-10deg);
    transform-origin: left center;
    transition: opacity 2s cubic-bezier(0.165, 0.84, 0.44, 1), transform 3.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.t-fadein.view span {
    opacity: 1;
    transform: none;
}

.t-fadein span:nth-child(1) {
    transition-delay: 0.2s;
}

.t-fadein span:nth-child(2) {
    transition-delay: 0.3s;
}

.t-fadein span:nth-child(3) {
    transition-delay: 0.4s;
}

.thumb-wrap{
	line-height: 0;
	overflow: hidden;
}

.thumb-wrap img{
	width: 100%;
	height: 100%;
	object-fit:cover;
	font-family: 'object-fit: cover;'
}

.ihover .thumb-wrap img,
.ihover img{
    transform-origin: center center;
    transition: 1s cubic-bezier(.25, 1, .5, 1);	
}

.ihover:hover .thumb-wrap img,
.ihover:hover img{
	transform: scale(1.05);
	animation: imgFlash 1s ease;
}

@keyframes imgFlash {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}