@charset "utf-8";

/* !HTML5 elements
---------------------------------------------------------- */
header, footer, nav, section, aside, article
{ display: block;}

/* !Reseting
---------------------------------------------------------- */

body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td
{ margin: 0; padding: 0;}
input, textarea
{ margin: 0; font-size: 100%;}
label
{ cursor: pointer;}
table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}
fieldset, img
{ border: 0;}
img
{ vertical-align: top; max-width: 100%;}
address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}
ol, ul
{ list-style: none;}
caption, th
{ text-align: left;}
h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: normal;}
q:after, q:before
{ content:'';}
a, input,select,textarea,button
{ outline: none; }
abbr, acronym
{ border: 0;}



/* !Clearfix
---------------------------------------------------------- */
.clearfix {
	display: block;
	min-height: 1%;
}
.clearfix:after {
	clear: both;
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
}
* html .clearfix {
	height: 1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* !Inline Align ------------------------------------------------------------ */
.taL { text-align: left   !important;}
.taC { text-align: center !important;}
.taR { text-align: right  !important;}

/*common*/
a {
	color: inherit;
	text-decoration: none;
	transition: all 0.5s !important;
	-moz-transition: all 0.5s !important; /* Firefox */
	-webkit-transition: all 0.5s !important; /* Chrome&Safari */
}
.op img {
	transition: all 0.5s !important;
	-moz-transition: all 0.5s !important; /* Firefox */
	-webkit-transition: all 0.5s !important; /* Chrome&Safari */
}
.op:hover img {
	opacity: .7;
	-webkit-opacity: .7;
	-moz-opacity: .7;
}

/* !Layout
---------------------------------------------------------- */
* {
	box-sizing: border-box;
}

html { 
	overflow-y: scroll;
	font-size: 62.5%;
}
body {
	color: #414141;
	font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	font-size: 1.6rem;
	-webkit-text-size-adjust: none;
	line-height: 1.5;
}
@media screen and (max-width: 1200px) {
	html { 
		font-size: 0.83333vw;
	}
}
@media screen and (max-width: 834px) {
	html {
		font-size: 62.5%;
	}
}
@media screen and (max-width: 374px) {
	html {
		font-size: 2.6667vw;
	}
}


/* !wrapper
---------------------------------------------------------- */
#wrapper {
	overflow: hidden;
	position: relative;
}

/* !header
---------------------------------------------------------- */
#header {
	display: flex;
	justify-content: space-between;
	position: fixed;
	top: 2.3rem;
	left: 50%;
	z-index: 99;
	transition: all .5s ease;
	transform: translateX(-50%);
	padding: 0 5rem;
	width: 104rem;
	background: #fff;
	border-radius: 4.6rem;
}   
#headerLogo {
	display: flex;
	align-items: center;
	height: 7.8rem;
	font-size: 0;
}
#headerLogo img {
	width: 18.6rem;
}

.btnMenu {
	display: none;
}

#navi {
	padding: 0 3rem 0 0;
}
#navi ul {
	display: flex;
	gap: 0 8rem;
}
#navi li {
	display: flex;
	align-items: center;
	height: 7.8rem;
	font-weight: 700;
	font-size: 1.8rem;
}
#navi li a,
#navi li .parent {
	display: block;
	position: relative;
	word-break: keep-all;
}
#navi li .parent {
	cursor: pointer;
	padding-right: 3.2rem;
	background: url(../img/common/icon_down.svg)no-repeat right center;
}
#navi li a:after,
#navi li .parent:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	transition-duration: 0.3s;
	width: 0;
	border-bottom: 1px solid;
}
#navi .submenu {
	position: absolute;
	top: 100%;
	padding-top: 1rem;
	right: 3.6rem;
	width: 23.4rem;
}

#navi .submenu .submenuIn {
	padding: 0.6rem 3.2rem;
	width: 100%;
	background: #fff;
	border-radius: 1rem;
	border: 1px solid;
	font-size: 1.5rem;
}

#navi .submenu a {
	display: block;
	padding: 2rem 0.2rem;
}
#navi .submenu a + a {
	border-top: 1px solid #333;
}


@keyframes lightPulsate {
	0% {
	    opacity: .7;
	    transform: scale(1);
	}
	100% {
	    opacity: 0;
	    transform: scale(1.3);
	}
}


@media screen and (min-width: 768px) {
		

	#header.hiddenNav:not(.hasSubmenu) {
		justify-content: center;
		width: 32rem;
	}

	#header.hiddenNav:not(:hover):before {
		content: "";
		display: inline-block;
		opacity: 1;
		position: absolute;
		left: 0;
		top: 0;
		animation: lightPulsate 3s cubic-bezier(.2,1,.2,1) infinite;
		width: 100%;
		height: 100%;
		background-color: #fff;
		border-radius: 10rem;
	}

	#header.hiddenNav.hasSubmenu:before {
		display: none;
	}

	.hiddenNav:not(.hasSubmenu) #navi {
		overflow: hidden;
		padding: 0;
		width: 0;
	}
	
	.hiddenNav:not(.hasSubmenu):hover #navi {
		padding: 0 3rem 0 0;
		width: auto;
	}


	#header.hiddenNav:hover {
		justify-content: space-between;
		width: 104rem;
	}
	
	#navi li a:hover:after,
	#navi li .parent:hover:after {
		width: 100%;
	}

	#navi li:hover .parent:after {
		width: 100%;
	}

	#navi .submenu {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .3s, visibility .3s;
	}

	#navi li:hover .submenu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	
	#navi .submenu a:hover:after {
		content: none;
	}

}

/*** sp ***/
@media screen and (max-width: 767px) {
	#header {
	    justify-content: center;
	    top: 1.1rem;
	    padding: 0 1.5rem;
	    width: calc(100% - 2.4rem);
	}
	#headerLogo {
	    height: 3.6rem;
	}
	#headerLogo img {
	    width: 9.9rem;
	}
	.btnMenu {
		display: block;
		position: absolute;
		right: 1.5rem;
		top: 0;
		width: 1.4rem;
		height: 100%;
		background: url(../img/common/icon_menu.svg)no-repeat center;
		background-size: 100%;
	}
	.btnMenu.active {
		background-image: url(../img/common/icon_menu_close.svg);
	}
	#navi {
		opacity: 0;
		visibility: hidden;
		position: fixed;
		right: 0;
		top: calc(100% + 1.2rem);
		padding: 3rem 3rem 4rem;
		background: #fff;
		border-radius: 2rem;
		box-shadow: -0.7rem 0.9rem 0 #000;
	}
	#navi.open {
		opacity: 1;
		visibility: visible;
	}
	#navi ul {
	    display: block;
	}
	#navi li {
		display: block;
		margin-bottom: 1.7rem;
		height: auto;
		font-size: 1.6rem;
	}

	#navi li .parent {
		padding-right: 0;
		background: none;
	}

	#navi .submenu {
	    display: block !important;
	    position: static;
	    width: auto;
	    padding-top: 0;
	}

	#navi .submenu .submenuIn {
	    padding: 0.9rem 1rem 0;
	    width: auto;
		border-radius: 0;
	    border: 0;
	    font-size: 1.4rem;
		font-weight: 400;
	}

	#navi .submenu a {
		padding: 0.5rem 0;
	}
	#navi .submenu a + a {
	    border-top: 0;
	}
	#navi .logo {
		margin-bottom: 1rem;
	}
	#navi .logo img {
		width: 14.6rem;
	}
	#navi .btnLink a {
	    padding: 0 4.8rem 0 1.7rem;
	    height: 3.8rem;
		font-size: 1rem;
	}
	#navi .btnLink a:after {
		right: 0.7rem;
		width: 2.5rem;
	}
}



/* footer
-----------------------------------------------------------*/ 
#footer {
	padding: 9rem 0 6rem;
	background: #FFB549;
}
.footerIn {
	display: flex;
	justify-content: space-between;
}
.footlinks {
	display: flex;
	gap: 0 3.5rem;
}
.footlinks li a {
	border-bottom: 1px solid transparent;
}
.footlinks li .tit {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	line-height: 1.444;
	font-weight: 700;
	font-size: 1.8rem;
}
.footlinks li .tit:before {
	content: "❯";
	margin-right: 1rem;
	font-size: 1.4rem;
}
.footlinks .subLevel {
	padding-left: 1.8rem;
	line-height: 1.785;
	font-weight: 500;
	font-size: 1.4rem;
}

#footer .sns {
	margin-top: 6rem;
}
.footLogo {
	margin-bottom: 3rem;
}
.footLogo img {
	max-width: 25.5rem;
}

#copyright {
	margin-top: 2rem;
	font-size: 1.5rem;
	font-weight: 700;
}

/*** hover ***/
@media screen and (min-width: 960px) {
	.footlinks a:hover {
		border-color: #414141;
	} 
	#footer .sns a:hover img {
		transform: scale(1.06, 1.06);
	}
	
}
/*** sp ***/
@media screen and (max-width: 767px) {
	#footer {
	    padding: 4.5rem 0 6.4rem;
	}
	.footerIn {
	    display: block;
		padding: 0 1rem;
	}
	.footlinks {
	    display: block;
	}
	#footer .sns {
		margin-top: 3rem;
	}
	#footer .access {
		margin-top: 4.6rem;
		text-align: center;
	}
	.footLogo {
		margin-bottom: 2rem;
	}
	#footer .btnLink a {
		padding-right: 8rem;
	}
	#copyright {
		margin-top: 3.5rem;
		font-size: 1rem;
		text-align: center;
	}
}


/* !common
---------------------------------------------------------- */
@media screen and (min-width: 768px) {
	.sp {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	.pc {
		display: none;
	}
}

.inner {
	margin: 0 auto;
	padding: 0 5rem;
	max-width: 130rem;
}
.inner.small {
	max-width: 96.2rem;
}

.overplay {
	display: none;
	opacity: 0.1;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 90;
	width: 100%;
	height: 100vh;
	background: #fff;
}

.hide {
	display: none;
}

.fwBL {
	font-weight: 900 !important;
}

#mainVisual {
	position: relative;
	padding: 22rem 0 0;
	min-height: 50rem;
	max-height: 71rem;
	height: calc(100vh - 6rem);
	background: url(../img/top/bg_main.jpg)no-repeat center;
	background-size: cover;
}
#mainVisual .info {
	position: relative;
	z-index: 2;
	margin-left: auto;
	max-width: 49.21%;
	color: #005B59;
}
#mainVisual .head .jap {
	line-height: 1.228;
	letter-spacing: 0.07em;
	font-size: 5.7rem;
	font-weight: 900;
}
#mainVisual .head .eng {
	line-height: 1.35;
	letter-spacing: 0.1em;
	font-size: 2rem;
	font-weight: 700;
}
#mainVisual .btnLink {
	margin-top: 3rem;
}
#mainVisual .btnLink a {
	padding: 0 5rem 0 2.6rem;
	max-width: 24rem;
	height: 5.5rem;
	font-size: 1.4rem;
}
#mainVisual .btnLink a:after {
	right: 0.8rem;
	width: 3.7rem;
}
#mainVisual .img {
	pointer-events: none;
	position: absolute;
	z-index: 3;
	width: 48.4rem;
	left: 50%;
	transform: translateX(16.4rem);
	bottom: -8rem;
}
 
#teaser {
	overflow: hidden;
	position: relative;
	height: 38rem;
}
#teaser .bg {
	overflow: hidden;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 200%;
	text-align: center;
	border-radius: 50%;
}
#teaser .bg img {
	object-fit: cover;
	width: 50%;
	height: 50%;
}
#teaser .head {
	position: absolute;
	left: 0;
	bottom: 12rem;
	width: 100%;
	text-align: center;
	color: #fff;
}
#teaser .head .jap {
	line-height: 1.4;
	font-size: 4.5rem;
	font-weight: 900;
}
#teaser .head .eng {
	font-size: 2.5rem;
	font-weight: 900;
}

.btnLink a {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	position: relative;
	z-index: 2;
	padding: 0 6rem 0 3rem;
	height: 6.6rem;
	width: 100%;
	max-width: 25.7rem;
	background: #005B59;
	border: 1px solid #005B59;
	border-radius: 6rem;
	color: #fff;
	font-weight: 700;
}
.btnLink a:before {
	content: "";
	position: absolute;
	right: 100%;
	top: 0;
	z-index: -1;
	transition-duration: 0.5s;
	width: 100%;
	height: 100%;
	background: #5BC2E7;
}
.btnLink a:after {
	content: "";
	position: absolute;
	right: 1.2rem;
	top: 0;
	height: 100%;
	width: 4.4rem;
	background: url(../img/common/icon_link_gre.svg)no-repeat center;
	background-size: 100%;
}

.borWave {
	overflow: hidden;
	position: absolute;
	left: 0;
	width: 100%;
	line-height: 0;
	z-index: 1;
	pointer-events: none;
}
.borWaveTop {
    bottom: calc(100% - 1px);
    transform: rotate(180deg);
}
.borWaveBottom {
    top: calc(100% - 1px);
}

.colorGreen {	
	color: #6DCDB8;
}
.colorGreen2 {	
	color: #005B59;
}
.colorBlue {	
	color: #5BC2E7;
}
.colorYellow  {	
	color: #FFB549;
}

.bgGreen {	
	background-color: #6DCDB8;
}
.bgBlue {
	background-color: #5BC2E7;
} 
.bgPurple {
	background-color: #C1A7E2;
}
.bgPink {
	background-color: #FFA38B;
}

.hdL {
	margin-bottom: 3.8rem;
	text-align: center;
	font-size: 3.6rem;
	font-weight: 700;
}

.hdS {
	margin-bottom: 4.2rem;
	line-height: 1.3;
	letter-spacing: 0.03em;
}
.hdS .eng {
	font-size: 5.1rem;
	font-weight: 700;
}
.hdS .jap {
	font-size: 2.5rem;
	font-weight: 900;
}

.hdL .con,
.hdS .con {
	display: inline-block;
}

.contactWrap {
	padding: 14rem 0;
}
.contactWrap .inner {
	max-width: 120rem;
}
.contactWrap .contactBox {
	overflow: hidden;
	position: relative;
	z-index: 2;
	padding: 7rem 8.8rem;
	background: #027D3C;
	border-radius: 1rem;
	color: #fff;
}
.contactWrap .contactBox .bg {
	pointer-events: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
}
.contactWrap .contactBox .bg img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.contactWrap .contactBox .head {
	margin-bottom: 4.2rem;
	line-height: 1.45;
	font-size: 1.8rem;
	font-weight: 700;
}
.contactWrap .contactBox .head .big {
	font-size: 3.5rem;
}
.contactWrap .contactBox .links {
	display: flex;
	justify-content: space-between;
}
.contactWrap .contactBox .links a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 0.8rem;
	padding: 0 5rem;
	height: 11rem;
	width: calc(50% - 1.7rem);
	background: no-repeat 4.6rem center #fff;
	border-radius: 8rem;
	color: #414141;
}
.contactWrap .contactBox .links .tel {
	background-image: url(../img/common/icon_tel_gre.svg);
	font-size: 2.7rem;
	font-weight: 500;
}
.contactWrap .contactBox .links .tel:before {
	content: "TEL.";
	font-size: 1.9rem;
}
.contactWrap .contactBox .links .email {
	background-image: url(../img/common/icon_email_open_gre.svg);
	font-size: 2rem;
	font-weight: 700;
}

.anchorArea {
	position: relative;
}
.anchorArea .anchor {
	position: absolute;
	top: -12rem;
}

/*** hover ***/
@media screen and (min-width: 960px) {
	.btnLink a:hover {
		border-color: #5BC2E7;
		box-shadow: -1rem 0.8rem 0 #000;
	}
	.btnLink a:hover:before {
		right: 0;
	}
	 
}
/*** sp ***/
@media screen and (max-width: 767px) {
	.inner {
		padding: 0 1.6rem;
	}
	
	#mainVisual {
	    padding: 12rem 0 0;
	    min-height: 40.5rem;
	    height: 40.5rem;
	    max-height: 40.5rem;
	    background-position: center top;
	    background-image: url(../img/top/bg_main_sp.jpg);
	}
	#mainVisual .info {
	    max-width: 54%;
	}
	#mainVisual .head .jap {
	    line-height: 1.39;
	    font-size: 2.3rem;
	}
	#mainVisual .head .eng {
	    font-size: 1rem;
	}
	#mainVisual .img {
		margin: 0 0 0 auto;
	    width: 20rem;
	    right: 0;
	    left: unset;
	    transform: translateX(0);
	    bottom: -4rem;
	}
	#mainVisual .info .btnLink {
		margin-top: 1rem;
		text-align: center;
	}
	#mainVisual .btnLink a {
	    padding: 0 3rem 0 1.3rem;
	    height: 2.7rem;
	    font-size: 1rem;
	}
	#mainVisual .btnLink a:after {
	    right: 0.5rem;
	    width: 1.7rem;
	}
	
	#teaser {
	    height: 19rem;
	}
	#teaser .head {
	    bottom: 6.4rem;
	}
	#teaser .head .jap {
	    line-height: 1.2;
	    font-size: 2.8rem;
	}
	#teaser .head .eng {
	    font-size: 1.2rem;
	}
	 
	.hdL {
		margin-bottom: 2.6rem;
		font-size: 2.4rem;
	}
	.hdS {
		margin-bottom: 2.2rem;
	}
	.hdS .eng {
		font-size: 3.9rem;
	}
	.hdS .jap {
		font-size: 1.8rem;
	}
	
	.btnLink a {
		width: auto;
	}
	
	.contactWrap {
	    padding: 5rem 0;
	}
	.contactWrap .contactBox {
	    padding: 3.6rem 2.4rem 3rem;
	}
	.contactWrap .contactBox .head {
	    margin-bottom: 2.5rem;
		line-height: 1.6;
		text-align: center;
	    font-size: 1.4rem;
	}
	.contactWrap .contactBox .head .big {
		font-size: 2.4rem;
	}
	.contactWrap .contactBox .links {
		flex-direction: column;
		gap: 1.4rem 0;
	}
	.contactWrap .contactBox .links a {
		gap: 0 0.6rem;
		width: 100%;
		height: 7.2rem;
		background-position: 3rem center;
	}
	.contactWrap .contactBox .links .tel {
		background-size: 2rem;
		font-size: 1.8rem;
	}
	.contactWrap .contactBox .links .tel:before {
	    font-size: 1.4rem;
	}
	.contactWrap .contactBox .links .email {
		background-size: 2.2rem;
	    font-size: 1.4rem;
	}
	
}


/* !page
---------------------------------------------------------- */
.topMulticolumn {
	position: relative;
	padding: 11rem 0 12rem;
	background: #FFB549;
}
.topMulticolumn .inner {
	max-width: 125rem;
}
.topMulticolumn .list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5.8rem;
}
.topMulticolumn li .item {
	padding: 3rem;
	height: 100%;
	background: #fff;
	border-radius: 2rem;
	box-shadow: -0.8rem 0.8rem 0 #222;
}
.topMulticolumn li:nth-child(3n+1) .item {
	transform: rotate(-11deg) translateY(4rem);
}
.topMulticolumn li:nth-child(3n+3) .item {
	transform: rotate(11deg) translateY(4rem);
}
.topMulticolumn li .logo {
	margin-bottom: 1.2rem;
	width: 11rem;
}
.topMulticolumn li .info {
	line-height: 1.7857;
	font-size: 1.3rem;
	font-weight: 500;
}
.topMulticolumn li .tit {
	margin-bottom: 2rem;
	line-height: 1.4;
	font-size: 2.6rem;
	font-weight: 900;
}

.topLineup {
	padding: 12rem 0;
} 
.lineupCtrl {
	display: flex;
	margin: 0 auto 7rem;
	max-width: 50rem;
	border: 1px solid;
	border-radius: 5rem;
}
.lineupCtrl li {
	cursor: pointer;
	transition-duration: 0.3s;
	padding: 1.5rem 1rem;
	width: 50%;
	border-radius: 5rem;
	border: 1px solid #fff;
	text-align: center;
	font-weight: 700;
	font-size: 2.2rem;
}
.lineupCtrl li.onActive {
	background: #005B59;
	border-color: #414141;
	color: #fff;
}
.lineupGoods {
	margin: 0 auto;
	max-width: 110rem;
}
.lineupGoods .hd01 {
	padding: 1.2rem;
	margin-bottom: 4rem;
	background: #FBE795;
	border-radius: 0.9rem;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 700;
}
.lineupGoods .lineupPart + .lineupPart {
	margin-top: 6.8rem;
}
.lineupGoods ul {
	display: flex;
	flex-wrap: wrap;
	gap: 2.2rem;
}
.lineupGoods ul.center {
	justify-content: center;
}
.lineupGoods li {
	width: calc(25% - 1.65rem);
}
.lineupGoods li a {
	display: block;
	overflow: hidden;
	position: relative;
	border: 1px solid;
	border-radius: 1rem;
}
.lineupGoods .img {
	position: relative;
	padding-top: 100%;
}
.lineupGoods .img img {
	position: absolute;
	left: 0;
	top: 0;
	transition-duration: 0.5s;
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.lineupGoods .img .on {
	opacity: 0;
	position: absolute;
	z-index: 2;
}
.lineupGoods .tit {
	padding: 3rem 1rem 2.5rem;
	text-align: center;
	color: #000;
	font-size: 1.4rem;
	font-weight: 700;
}

.topBrandstory {
	position: relative;
	padding: 5rem 0 8rem;
}
.topBrandstory .inner {
	max-width: 130rem;
}

.topDisplay {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	max-width: 106rem;
}
.topDisplay.reverse {
	flex-direction: row-reverse;
}
.topDisplay .img {
	width: 49%;
}
.topDisplay .img img {
	object-fit: cover;
	width: 100%;
	min-height: 45rem;
	max-height: 60rem;
}
.topDisplay .img img,
.topDisplay .image-with-text__media:after {
	transition-duration: 0.5s;
}
.topDisplay .info {
	padding-right: 5rem;
	width: 52.83%;
}
.topDisplay .hdL {
	text-align: left;
    font-size: 3rem;
    margin-bottom: 2rem;
}
.topDisplay .sub {
	line-height: 1.944;
	font-size: 1.8rem;
	font-weight: 700;
}
.topDisplay .txt {
	line-height: 2.14;
	font-size: 1.4rem;
	font-weight: 700;
}

.topBrandstory .topDisplay {
	max-width: inherit;
}
.topBrandstory .topDisplay .info {
	padding: 0 4rem;
}
.topBrandstory .topDisplay .btnLink {
	margin-top: 4rem;
}

.topBlog {
	padding: 10rem 0;
}
.topBlog .hd01 {
	margin-bottom: 3rem;
	text-align: center;
	line-height: 1;
	font-weight: 700;
	font-size: 3rem;
}
.topBlog .hd01 .con {
	display: inline-block;
}
.topBlogSwiper {
	overflow: hidden;
	position: relative;
}
.topBlogSwiper li {
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
}
.topBlogSwiper li .pic {
	object-fit: cover;
	width: 100%;
	height: 24rem;
}
.topBlogSwiper li .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	transition-duration: 0.5s;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
}
.topBlogSwiper li .icon img {
	width: 2rem;
}
.topBlogSwiper .swiper-button-next:after, 
.topBlogSwiper .swiper-button-prev:after {
	display: none;
}
.topBlogSwiper .swiper-button-prev,
.topBlogSwiper .swiper-button-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	background: rgba(255,255,255,0.8);
	border-radius: 50%;
	color: #414141;
	font-weight: 700;
}

.commodityList {
	padding: 10rem 0 12rem;
}
.commodityList .topDisplay {
	margin-bottom: 16.8rem;
}

.regularsizeInfo {
	position: relative;
	padding: 12rem 0 16rem;
}
.regularsizeInfo .inner {
	max-width: 123.6rem;
}
.regularsizeInfo .displayBox {
	display: flex;
	justify-content: space-between;
	padding: 5rem;
	background: #fff;
	border-radius: 1rem;
	border: 1px solid;
	font-size: 1.4rem;
}
.regularsizeInfo .displayBox + .displayBox {
	margin-top: 4.2rem;
}
.regularsizeInfo .displayBox .img {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.4rem 1.3rem;
	width: calc(50% - 3.3rem);
}
.sizeInfoSwiper {
	overflow: hidden;
	width: calc(100% - 10.5rem);
	border: 1px solid;
	border-radius: 1rem;
}

.sizeInfoSwiper .main-media {
	position: relative;
	width: 100%;
    padding-top: 100%;
}

.sizeInfoSwiper .main-media img {
	object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.sizeInfoThumb {
	width: 9.2rem;
}
.sizeInfoThumb .thumb-media {
	cursor: pointer;
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 1rem;
    width: 100%;
    padding-top: calc(100% - 2px);
    position: relative;
}
.sizeInfoThumb .thumb-media-active {
	border-color: #414141;
}
.sizeInfoThumb .thumb-media img {
	object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.onlineLink {
	width: 100%;
}
.onlineLink a {
	display: block;
	overflow: hidden;
	position: relative;
	z-index: 2;
	padding: 1.2rem 3rem;
	max-width: calc(100% - 10.5rem);
	background-color: #FFB549;
	border-radius: 5rem;
	border: 1px solid #FFB549;
	font-weight: 700;
}

.is-mini_size .onlineLink a {
	background-color: #FFA38B;
	border-color: #FFA38B;
}


.onlineLink a:before {
    content: "";
    position: absolute;
    right: 100%;
    top: 0;
    z-index: -1;
    transition-duration: 0.5s;
    width: 100%;
    height: 100%;
    background: #5BC2E7;
}
.onlineLink a:after {
    content: "";
	position: absolute;
	right: 2rem;
	top: 0;
	width: 1.2rem;
	height: 100%;
	background: url(../img/common/icon_link.svg)no-repeat center;
}
.regularsizeInfo .displayBox .info {
	width: calc(50% + 1.2rem);
}
.regularsizeInfo .table01 {
	width: 100%;
	line-height: 1.785;
}
.regularsizeInfo .table01 tr {
	border-bottom: 1px solid #BABABA;
}
.regularsizeInfo .table01 th {
	vertical-align: top;
	padding: 1.6rem 0;
	width: 9rem;
	font-weight: 700;
}
.regularsizeInfo .table01 td {
	vertical-align: top;
	padding: 1.6rem 0;
}
.regularsizeInfo .table01 .name {
	line-height: 1.4;
	font-weight: 700;
	font-size: 1.7rem;
}

.aboutStory {
	padding: 14rem 0;
	background: url(../img/about/img_seal.png)no-repeat 85% 10rem;
}

.aboutStory .hdS .eng {
	font-size: 1px;
	line-height: 1;
}

.aboutStory .hdS .eng img {
	width: 34.241rem;
}

.aboutStory .txt {
	line-height: 2.333;
	font-size: 1.5rem;
	font-weight: 700;
}
.aboutStory .foucs {
	padding: 0.3rem 0;
	margin: 0 0.5rem;
	background: #F1EEAB;
	color: #005B59;
}
.aboutStory .img {
	margin: 4rem 0 6.6rem;
}

.aboutSwiperWrap {
	position: relative;
	margin-top: 10rem;
}
.aboutSwiperWrap .pets {
	position: absolute;
	bottom: calc(100% - 2.6rem);
	left: calc(50% + 26rem);
	z-index: 3;
	width: 29.2rem;
}
.aboutSwiper {
	z-index: 2;
}
.aboutSwiper .swiper-wrapper {
	transition-timing-function: linear !important;
}
.aboutSwiper .swiper-slide {
	width: 39rem;
}
.aboutSwiper .swiper-slide img {
	object-fit: cover;
	width: 100%;
	height: 31.5rem;
	border-radius: 1rem;
}

.aboutGrade {
	position: relative;
	padding: 12rem 0 16rem;
}
.aboutGrade .part + .part {
	margin-top: 4rem;
}
.aboutGrade h3 {
	margin-bottom: 1rem;
	font-size: 2.7rem;
	font-weight: 700;
}
.aboutGrade p {
	line-height: 2.14;
	font-weight: 500;
	font-size: 1.4rem;
}
.aboutGrade .img {
	margin: 0 auto 3rem;
	text-align: center;
	font-size: 0;
}
.aboutGrade .img1 {
	max-width: 49.4rem;
}
.aboutGrade .end {
	overflow: hidden;
	margin: 12rem auto 0;
	max-width: 69.4rem;
	border-radius: 2rem;
}
.aboutGrade .case {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}
.aboutGrade .case li {
	overflow: hidden;
	width: calc(100%/3 - 4rem/3);
	border-radius: 2rem;
}

.toggleBox {
	display: none;
}

.faqWrap {
	padding: 14rem 0;
	background: #F1EEAB;
}
.faqWrap .inner {
	max-width: 105.6rem;
}
.faqList li {
	padding: 0 5rem;
	background: #fff;
	border-radius: 1rem;
	border: 1px solid;
}
.faqList li + li {
	margin-top: 3rem;
}
.faqList li .quest {
	cursor: pointer;
	position: relative;
	padding: 3.6rem 4rem 3.6rem 3.5rem;
	background: url(../img/common/icon_plus.svg)no-repeat right center;
	font-size: 1.8rem;
	font-weight: 700;
}
.faqList li .quest.open {
	background-image: url(../img/common/icon_minus.svg);
}
.faqList li .answer {
	position: relative;
	padding: 3.8rem 0 4.6rem 3.5rem;
	border-top: 1px solid #C9C9C9;
	line-height: 2.14;
	font-size: 1.4rem;
	font-weight: 500;
}
.faqList li .quest:before,
.faqList li .answer:before {
	position: absolute;
	left: 0;
	line-height: 1;
	font-family: 'Futura';
	font-size: 2rem;
	font-weight: 500;
}
.faqList li .quest:before {
	content: "Q.";
	top: 4rem;
	color: #6DCDB8;
}
.faqList li .answer:before {
	content: "A.";
	top: 4.3rem;
	color: #FFA38B;
}

/*** hover ***/
@media screen and (min-width: 960px) {
	
	.lineupGoods li a:hover {
		background: #5BC2E7;
		box-shadow: -0.8rem 0.8rem 0 #222;
	}
	.lineupGoods li a:hover .img .on {
		opacity: 1;
	}
	
	.topBlogSwiper li a:hover .icon {
		opacity: 1;
	}
	
	.lineupCtrl li:not(.onActive):hover {
		color: #FFB549;
	}
	.onlineLink a:hover {
		border-color: #5BC2E7;
		box-shadow: -1rem 0.8rem 0 #000;
	}
	.onlineLink a:hover:before {
		right: 0;
	}
	
	.contactWrap .contactBox .links a:hover {
		background-position: 4rem center;
		box-shadow: -1rem 1.2rem 0 #222;
	}
}

/*** sp ***/
@media screen and (max-width: 767px) {
	.topMulticolumn {
	    padding: 5rem 0;
	}
	.topMulticolumn .list {
		grid-template-columns: repeat(1, 1fr);
		gap: 5rem 0;
		padding: 0 2.4rem;
	}
	.topMulticolumn li .item {
		padding: 4rem 2.4rem;
	}
	.topMulticolumn li:nth-child(3n+1) .item,
	.topMulticolumn li:nth-child(3n+3) .item {
	    transform: rotate(0);
	}
	.topMulticolumn li:nth-of-type(odd) .item {
		transform: rotate(-5deg);
	}
	.topMulticolumn li:nth-of-type(even) .item {
		transform: rotate(5deg);
	}
	.topMulticolumn li .logo {
	    margin-bottom: 1rem;
	    width: 8rem;
	}

	.topMulticolumn li .info {
		font-size: 1.2rem;
	}
	
	.topLineup {
	    padding: 5rem 0;
	}
	.lineupCtrl {
	    margin-bottom: 3.2rem;
	}
	.lineupCtrl li {
	    padding: 0.8rem 1rem;
	    font-size: 1.5rem;
	}
	.lineupGoods .hd01 {
	    padding: 0.8rem;
	    margin-bottom: 1.5rem;
	    font-size: 1.4rem;
	}
	.lineupGoods ul {
	    gap: 1.6rem;
	}
	.lineupGoods ul.center {
	    justify-content: flex-start;
	}
	.lineupGoods li {
		width: calc(50% - 0.8rem);
	}
	.lineupGoods .tit {
	    padding: 1.5rem 1rem;
	}
	.lineupGoods .lineupPart + .lineupPart {
	    margin-top: 3.6rem;
	}
	
	.topBrandstory {
	    padding: 5rem 0 8rem;
	}
	.topDisplay {
	    display: block;
	}
	.topDisplay .img {
		margin-top: 3.2rem;
		width: auto;
	}
	.topDisplay.reverse .img {
		margin: 0 0 3.2rem;
	}
	.topDisplay .img img {
		min-height: 32rem;
		max-height: 35.2rem;
	}
	.topDisplay .info {
		padding: 0;
		width: auto;
	}
	.topDisplay .hdL {
		margin-bottom: 1.5rem;
	    text-align: center;
	}
	.commodityList .topDisplay .hdL {
		font-size: 2.2rem;
	}
	.topDisplay .sub {
		text-align: center;
	    line-height: 2.14;
	    font-size: 1.4rem;
	}
	.topBrandstory .topDisplay .info {
		padding: 0;
	}
	.topBrandstory .topDisplay .btnLink {
	    margin-top: 2.4rem;
		text-align: center;
	}
	.topBrandstory .topDisplay .btnLink a {
		height: 4.6rem;
	    font-size: 1.4rem;
	}
	.topBrandstory .topDisplay .btnLink a:after {
	    right: 0.8rem;
	    width: 3rem;
	}

	.topBlog {
	    padding: 5rem 0 7.2rem;
	}
	.topBlog .hd01 {
	    margin-bottom: 1.6rem;
	    font-size: 1.8rem;
	}
	.topBlogSwiper li .pic {
	    height: 7rem;
	}
	.topBlogSwiper .swiper-button-prev, 
	.topBlogSwiper .swiper-button-next {
		transform: scale(0.5);
	}
	.topBlogSwiper .swiper-button-prev {
		left: 0;
	}
	.topBlogSwiper .swiper-button-next {
		right: 0;
	}
	
	.commodityList {
	    padding: 4.2rem 0 6.4rem;
	}
	.commodityList .topDisplay {
	    margin-bottom: 7.8rem;
	}
	
	.regularsizeInfo {
	    padding: 4rem 0 8rem;
	}
	.regularsizeInfo .displayBox {
	    display: block;
	    padding: 1.4rem;
	    border-radius: 1rem;
	    font-size: 1.4rem;
	}
	.regularsizeInfo .displayBox + .displayBox {
	    margin-top: 2.4rem;
	}
	.regularsizeInfo .displayBox .img {
		display: block;
		margin-bottom: 1.2rem;
		width: auto;
	}
	.sizeInfoSwiper {
		width: auto;
	}
	.sizeInfoThumb {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
		margin-top: 1rem;
		width: 100%;
	}
	.onlineLink {
		margin-top: 1.6rem;
	}
	.onlineLink a {
	    padding: 1.2rem 3rem;
		max-width: inherit;
	}
	.regularsizeInfo .displayBox .info {
		width: auto;
	}
	
	.aboutStory {
	    padding: 5rem 0 6.4rem;
	    background-image: url(../img/about/img_seal_sp.png);
		background-position: calc(100% - 2rem) 4rem;
		background-size: 8rem;
	} 

	.aboutStory .hdS .eng img {
		width: 26.185rem;
	}
	.aboutStory .txt {
		line-height: 2.14;
		font-size: 1.4rem;
	}
	.aboutStory .foucs {
		padding: 0.3rem 0;
		margin: 0 0.5rem;
	}
	.aboutStory .img {
		margin: 3rem 0 3.4rem;
	}
	.aboutSwiperWrap {
	    margin-top: 8.4rem;
	}
	.aboutSwiperWrap .pets {
	    bottom: calc(100% - 1.3rem);
	    left: auto;
		right: 1.8rem;
	    width: 14.5rem;
	}
	.aboutSwiper .swiper-slide {
		width: 16rem;
	} 
	.aboutSwiper .swiper-slide img {
	    height: 13rem;
	}
	
	.aboutGrade {
	    padding: 5rem 0 8rem;
	}
	.aboutGrade .img {
		margin-bottom: 2rem;
	}
	.aboutGrade h3 {
	    margin-bottom: 1.2rem;
	    font-size: 2rem;
	}
	.aboutGrade .end {
		margin-top: 5rem;
	}
	.aboutGrade .case li {
		border-radius: 1rem;
	}
	
	.faqWrap {
		padding: 5rem 0;
	}
	.faqList li {
	    padding: 0.5rem 1.6rem;
	}
	.faqList li + li {
	    margin-top: 1.5rem;
	}
	.faqList li .quest {
	    padding: 1.5rem 2rem 1.5rem 3rem;
		background-size: 1.4rem;
	    font-size: 1.4rem;
	}
	.faqList li .answer {
	    padding: 1.5rem 0 1.5rem 3rem;
		line-height: 1.785;
	}
	.faqList li .quest:before {
		top: 1.6rem;
	}
	.faqList li .answer:before {
		top: 1.8rem;
	}
}

.questNa{
	font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
	margin-top: 5.5rem;
}

@media screen and (max-width: 767px) {
	.questNa {
	    font-size: 2rem;
	    margin-bottom: 1rem;
	    margin-top: 2rem;
	}
}


.companyWrap {
	padding: 14rem 0;
}

.companyWrap .inner {
    max-width: 94rem;
}

.companyTable{
	border-top: 1px solid #909090;
	width: 100%;
}

.companyTable th,
.companyTable td{
	font-size: 1.6rem;
	line-height: 1.875;
	letter-spacing: 0.04em;
	border-bottom: 1px solid #909090;
	padding: 4rem 0 4rem 6rem;
}
.companyTable th{
	border-right: 1px solid #909090;
	vertical-align: top;
	width: 25rem;
	padding: 4rem 0 4rem 7.7rem;
	color: #005B59;
	font-weight: bold;
}
.companyTable .addrP{
	position: relative;
	margin-bottom: 3.2rem;
}
.companyTable .addrP a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 9.3rem;
	height: 3.4rem;
	border: 1px solid #707070;
	color: #262626;
	font-size: 1.4rem;
	letter-spacing: .15em;
	font-weight: 300;
	border-radius: 2rem;

	position: absolute;
	right: 0;
	top: -.2rem;
	z-index: 1;
}

.iframeP {
    position: relative;
    width: 100%;
    padding-top: 56%;
}
.iframeP iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.companyTable .iframeP{
	padding-top: 27.6%;
}

@media screen and (max-width: 767px) {
	.companyWrap {
		padding: 5rem 0;
	}

	.companyTable{
		border-top: 0;
		border-bottom: 1px solid #909090;
	}
	.companyTable th,
	.companyTable td{
		display: block;
		font-size: 1.4rem;
		line-height: 2.14;
		padding: 0 0 2rem;
		width: 100%;
		border-bottom: 0;
	}
	.companyTable td.letter{
		letter-spacing: -0.05em;
	}
	.companyTable th{
		border-top: 1px solid #909090;
		vertical-align: top;
		padding: 2rem 0 0;
		border-right: 0;
	}
	.companyTable .addrP{
		margin-bottom: 2rem;
	}
	.companyTable .addrP a{
		width: 6.5rem;
		height: 2.4rem;
		font-size: 1rem;
		bottom: calc(100% + .3rem);
	}
	.companyTable .iframeP{
		padding-top: 48.9%;
	}
}


.topNews {
	padding: 12rem 0 0;
}

.newsList {
	width: 100%;
	max-width: 82.8rem;
	margin: 0 auto;
	word-break: break-all;
}

.newsList li {
	border-bottom: .1rem solid #A7A7A7;
}

.newsList .newsItem {
	display: block;
	padding: 2.5rem 6rem 2.5rem 0;
}

.newsList a.newsItem {
	background: url(../img/common/icon_arrow.svg) right center no-repeat;
	background-size: 4rem auto;
	text-decoration: none;
}

.newsList .newsItem .date {
	display: inline-block;
	font-size: 1.2rem;
	line-height: 1.5;
	padding: .45rem 1.3rem;
	border: .1rem solid #707070;
	border-radius: 1.5rem;
	background: #fff;
	color: #414141;
	margin-bottom: 1.4rem;
}

.newsList .newsItem .title {
	font-size: 1.4rem;
	line-height: 1.5;
	color: #414141;
	font-weight: bold;
	display: block;
}

/*** hover ***/
@media screen and (min-width: 960px) {
	.newsList a:hover .title {
		text-decoration: underline;
	}
}