@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,200,300,400,500,600,700,800,900&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:100,200,300,400,500,600,700,800,900&display=swap&subset=japanese');

.brnad-bnr {
   width:90%; max-width:1200px; margin:30px auto 0 auto;
}
.brnad-bnr a img,
.brnad-bnr a:hover img {
    width: 100%;
    border: 1px solid #CCC;
	box-sizing:border-box;
}

/* 初期設定 */

.wrap {
    width: 100%;
	max-width:100%;
}
.pankuzu {
    width: 96%;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
strong {
    font-weight: bold;
}
img {
    vertical-align: bottom;
}

.pagetop {
	z-index:100;
	}

@media screen\0 {
img { height:auto;
  max-width:100%;
  width:auto; /* ie8 */}
}

table {
    border-collapse: collapse;
}
a:hover img, input[type="image"]:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha( opacity=70 )";
    border: none;
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
    display: block;
}

/* iOSでのデフォルトスタイルをリセット */
body {
    -webkit-text-size-adjust: 100%;
    -webkit-print-color-adjust: exact;
}
input[type="submit"], input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration {
display: none;
}
input[type="submit"]::focus, input[type="button"]::focus {
outline-offset: -2px;
}

.hero {
	background-image: url(/images/dog-frozen/main-bg.jpg);
	background-size: cover;
	width: 100%;
	height: 673px;
	position: relative;
	background-position: center center;
}
.hero > div{
	width: 100%;
	max-width: 1200px;
	position: absolute;
	top: 0;
	left: calc( 50% - 600px );
	z-index: 10;
}
.hero > div img{
	width: 100%;
}
@media (max-width: 1200px) {
	.hero {
		aspect-ratio: 1200 / 699 ;
		height: auto;
	}
	.hero > div{
		width: 100%;
		max-width: 100%;
		top: 0;
		left: 0;
	}
}
@media (max-width: 780px) {
.hero {
	width: 100%;
	height: auto;
	padding: 25px 0 0 0;
}
.hero > div{
	width: 100%;
	position: static;
}
}
.future {
	width: 100%;
	background: #110908;
	padding: 0 0 50px;
	position: relative;
	}
.future .inner{
	width: 96%;
	max-width:1200px;
	margin:0 auto;
	padding-top: 25px;
	padding-left: 180px;
	box-sizing: border-box;
	position: relative;
	}
.future .inner::before{
	content: "";
	position: absolute;
	left: 0;
	top: -92px;
	background: url(/images/dog-frozen/ico-new.svg);
	background-size: cover;
	width: 184px;
	height: 184px;
	display: block;
	}
.future h2 {
	font-family: "Noto Serif JP";
	font-weight: 600;
	font-size: 60px;
	letter-spacing: 0.15em;
	color: #fff;
	margin-bottom:26px;
	}
.future p {
	font-family: "Noto Serif JP";
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-align: left;
	color: #fff;
	}	
.future li {
	font-family: "Noto Serif JP";
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-align: left;
	color: #FFF1B4;
	position: relative;
	padding-left: 30px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	background-image : linear-gradient(to right, rgb(255, 255, 255, 0.5) 2px, transparent 2px);
	background-size: 4px 1px;
	background-repeat: repeat-x; 
	background-position: left bottom;
}
.future li::before {
	content: "";
	background: url(/images/dog-frozen/ico-features.svg);
	background-size: cover;
	width: 20px;
	height: 20px;
	display: block;
	top: calc( 50% - 8px );
	left: 0;
	position: absolute;
}
.future li span{
	font-family: "Noto Serif JP";
	font-weight: 600;
	font-size: 25px;
	color: #FFCC00;
}
@media (max-width: 1200px) {
	.future .inner{
		width: 96%;
		max-width:1200px;
		margin:0 auto;
		padding-top: 25px;
		padding-left: 130px;
		box-sizing: border-box;
		position: relative;
		}
	.future .inner::before{
		content: "";
		position: absolute;
		left: 0;
		top: -65px;
		background: url(/images/dog-frozen/ico-new.svg);
		background-size: cover;
		width: 130px;
		height: 130px;
		display: block;
		}
	.future h2 {
		font-size: 40px;
		}
	.future p {
		font-size: 18px;
		}	
	.future li {
		font-size: 16px;
		padding-left: 20px;
	}
	.future li::before {
		content: "";
		background: url(/images/dog-frozen/ico-features.svg);
		background-size: cover;
		width: 14px;
		height: 14px;
		display: block;
		top: calc( 50% - 10px );
		left: 0;
		position: absolute;
	}
	.future li span{
		font-size: 20px;
		display: inline-block;
	}
}
@media (max-width: 768px) {
	.future {
		padding: 0 0 25px;
		}
	.future .inner{
		padding-top: 25px;
		padding-left: 40px;
		}
	.future .inner::before{
		content: "";
		position: absolute;
		left: 0;
		top: -30px;
		background: url(/images/dog-frozen/ico-new.svg);
		background-size: cover;
		width: 60px;
		height: 60px;
		display: block;
		}
	.future h2 {
		font-size: 20px;
		margin-bottom:15px;
		}
	.future li {
		font-size: 13px;
	}
	.future li::before {
		content: "";
		background: url(/images/dog-frozen/ico-features.svg);
		background-size: cover;
		width: 12px;
		height: 12px;
		display: block;
		top: calc( 50% - 10px );
		left: 0;
		position: absolute;
	}
	.future li span{
		font-size: 16px;
	}
}
@media (max-width: 320px) {
	.future h2 {
		font-size: 18px;
		}
	.future li {
		font-size: 12px;
		padding-left: 16px;
	}
	.future li::before {
		content: "";
		background: url(/images/dog-frozen/ico-features.svg);
		background-size: cover;
		width: 10px;
		height: 10px;
		display: block;
		top: calc( 50% - 8px );
		left: 0;
		position: absolute;
	}
	.future li span{
		font-size: 13px;
	}
}
.product-image {
	background: url(/images/dog-frozen/product-img-bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}
.product-image .inner{
	width: 96%;
	max-width:1200px;
	margin:0 auto;
	padding-top: 70px;
	padding-bottom: 100px;
	box-sizing: border-box;
	}
.product-image .inner h3 {
	font-family: "Noto Serif JP";
	font-weight: bold;
	font-size: 30px;
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-align: center;
	color: #232323;
	margin-bottom: 80px;
}
.product-image .inner h3 span{
	font-family: "Noto Serif JP";
	font-weight: bold;
	font-size: 30px;
	letter-spacing: 0.1em;
	line-height: 1.6;
	color: #232323;
	display: inline-block;
}
.product-image .inner ul.top{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 30px;
	}
.product-image .inner ul.top li{
	width: 32.1666%;
	}
.product-image .inner ul.bottom{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	}
.product-image .inner ul.bottom li{
	width: 19.75%;
	}
.product-image .inner ul li img {
	width: 100%;
}

@media (max-width: 768px) {
	.product-image .inner{
		padding-top: 30px;
		padding-bottom: 50px;
		}
	.product-image .inner h3 {
		font-size: 18px;
		margin-bottom: 40px;
	}
	.product-image .inner h3 span{
		font-size: 18px;
	}
	.product-image .inner ul.top{
		margin-bottom: 15px;
		justify-content: center;
		}
	.product-image .inner ul.bottom{
		justify-content: center;
		}
	.product-image .inner ul.top li{
		width: 45%;
		}
	.product-image .inner ul.bottom li{
		width: 32.1666%;
		}
}

.product-list {
	padding: 70px 0 130px 0;
}
.product-list .inner{
	width: 96%;
	max-width:1200px;
	margin:0 auto;
	box-sizing: border-box;
}
.product-list .inner h3{
	font-family: "Noto Serif JP";
	font-weight: bold;
	font-size: 30px;
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-align: center;
	color: #232323;
	margin-bottom: 80px;
}
.product-list .inner h3 span{
	font-family: "Noto Serif JP";
	font-weight: bold;
	font-size: 30px;
	letter-spacing: 0.1em;
	line-height: 1.6;
	color: #232323;
	display: inline-block;
}
.product-list .inner .item-list{
	display: flex;
	flex-wrap: wrap;
}
.product-list .inner .item {
	width: 21.666666%;
	margin-right: 4.4444%;
	margin-bottom: 80px;
}
.product-list .inner .item:nth-child(4n) {
	margin-right: 0;
}
.item a{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 175px;
	height: 42px;
	border-radius: 21px;
	background: #b90021;
	margin: auto auto 0;
}
.item a:hover .btn {
	background: #700015;
}
.btn span{
	font-family: "Noto Serif JP";
	font-weight: bold;
	font-size: 16px;
	letter-spacing: 0.1em;
	color: #fff;
	padding-left: 26px;
	position: relative;
}
.btn span::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background: url(/images/dog-frozen/ico-arrow.svg);
	background-size: cover;
	position: absolute;
	left: 0;
	top: calc( 50% - 8px );
}


.btn:hover::after {
  -webkit-animation-name: btnHover;
  animation-name: btnHover;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@media (max-width: 1000px) {
	.btn {
		width: 100%;
		height: 38px;
	}
	.btn span{
		font-size: 14px;
		padding-left: 20px;
	}
	.btn span::after {
		content: "";
		display: block;
		width: 12px;
		height: 12px;
		background: url(/images/dog-frozen/ico-arrow.svg);
		background-size: cover;
		position: absolute;
		left: 0;
		top: calc( 50% - 6px );
	}
}
.item-image {
	text-align: center;
	margin-bottom: 5px;
}
.item-image img {
	width: 80.769%;
}
.item-name {
	font-family: "Noto Serif JP";
	font-weight: bold;
	font-size: 18px;
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-align: center;
	color: #232323;
	margin-bottom: 12px;
}
.item-txt{
	font-family: "Noto Sans JP";
	font-weight: normal;
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 1.6;
	text-align: left;
	color: #818181;
	margin-bottom: 30px;
}

.note {
	text-align: right;
	font-family: "Noto Sans JP";
	font-weight: normal;
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 1.5;
	color: #818181;
}
@media (max-width: 768px) {
	.product-list {
		padding: 30px 0 70px 0;
	}
	.product-list .inner h3{
		font-size: 18px;
		margin-bottom: 40px;
	}
	.product-list .inner h3 span{
		font-size: 18px;
	}
	.product-list .inner .item {
		width: 48%;
		margin-right: 4%;
		margin-bottom: 40px;
	}
	.product-list .inner .item:nth-child(2n) {
		margin-right: 0;
	}
	.item-image img {
		width: 60%;
	}
	.item-name {
		font-size: 14px;
	}
	.item-txt{
		font-size: 12px;
		margin-bottom: 20px;
	}

	.note {
		font-size: 12px;
	}
}
@media (max-width: 340px) {
	.item-name {
		font-size: 12px;
	}
	.item-txt{
		font-size: 12px;
		margin-bottom: 20px;
	}
}
.shop {
	background: #F8F8F8;
	padding-top: 140px;
}
.shop .inner{
	width: 96%;
	max-width:1200px;
	margin:0 auto;
	box-sizing: border-box;
}
.shop h3{
	text-align: center;
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 20px;
	padding-top: 25px;
	padding-bottom: 25px;
}
.shop h3 span{
	font-family: "Noto Serif JP";
	font-weight: bold;
	font-size: 30px;
	color: #232323;
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-align: center;
	display: inline-block;
}
.shop h3::before{
	content: "";
	background: url(/images/dog-frozen/ttl-top-black.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	width: 100%;
	height: 34px;
	left: 0;
	top: 0;
	position: absolute;
}
.shop h3::after{
	content: "";
	background: url(/images/dog-frozen/ttl-bottom-black.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	width: 100%;
	height: 30px;
	left: 0;
	bottom: 0;
	position: absolute;
}
.shop-logo {
	text-align: center;
	margin-bottom: 40px;
}
.shop-logo img{
	width: 100%;
	max-width: 339px;
}
.shop-image {
	display: flex;
	flex-wrap: wrap;
}
.shop-image > div{
	width: 25%;
}
.shop-image > div img{
	width: 100%;
}
.shop-link {
	font-family: "Noto Serif JP";
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.1em;
	text-align: center;
	color: #232323;
	margin-bottom: 40px;
}
.shop-link a{
	font-family: "Noto Serif JP";
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.1em;
	padding-right: 20px;
	position: relative;
}
.shop-link a:hover{
	text-decoration: underline;
}
.shop-link a::after{
	content: "";
	background: url(/images/dog-frozen/ico-window.svg);
	background-repeat: no-repeat;
	background-size: contain;
	width: 13px;
	height: 13px;
	right: 0;
	top: calc( 50% - 5px );
	display: block;
	position: absolute;
}

@media (max-width: 768px) {
	.shop {
		padding-top: 35px;
	}
	.shop h3{
		margin: 0 auto 15px;
		width: 96%;
		padding-top: 25px;
		padding-bottom: 25px;
	}
	.shop h3 span{
		font-size: 18px;
	}
	.shop-logo {
		margin-bottom: 20px;
	}
	.shop-logo img{
		width: 50%;
	}
	.shop-image {
		display: flex;
		flex-wrap: wrap;
	}
	.shop-image > div{
		width: 50%;
	}
	.shop-link {
		font-size: 12px;
		margin-bottom: 20px;
	}
	.shop-link a{
		font-size: 12px;
		padding-right: 15px;
	}
	.shop-link a:hover{
		text-decoration: underline;
	}
	.shop-link a::after{
		content: "";
		background: url(/images/dog-frozen/ico-window.svg);
		background-repeat: no-repeat;
		background-size: contain;
		width: 10px;
		height: 10px;
		right: 0;
		top: calc( 50% - 4px );
		display: block;
		position: absolute;
	}
}


.ec {
    width: 100%;
    background: #ffefbe;
    padding: 50px 0;
	text-align: center;
}
.ec.online {
    background: #ffe184;
}
.ec .inner {
    width: 96%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}
.ec .inner h3 {
    font-family: "Noto Serif JP";
    font-weight: bold;
    font-size: 30px;
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: #232323;
	margin-bottom: 30px;
}
.ec.online .inner h3 {
	margin-bottom: 10px;
}
.ec-list {
	display: flex;
	flex-wrap: wrap;
	/*justify-content: space-between;*/
	justify-content: center;
}
.ec-list > div{
	width: calc((100% - 32px) / 4 );
	padding: 10px 20px;
	box-sizing: border-box;
	border-radius: 10px;
	background-color: #fff;
	margin: 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ec-list > div img{
	max-width: 100%;
}
.online .ec-list > div{
	aspect-ratio: 292 / 90;
}
.online .ec-list > div a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.ec-note {
	text-align: center;
    font-family: "Noto Sans JP";
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.5;
	margin-top: 30px;
}
.econline-note {
	text-align: center;
    font-family: "Noto Sans JP";
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.5;
	margin-bottom: 30px;
}
@media (max-width: 768px) {
	.ec {
		padding: 25px 0;
	}
	.ec .inner h3 {
		font-size: 18px;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 15px;
	}
	.ec-list > div{
		width: calc( 50% - 8px );
	}
	.ec-note {
		margin-top: 15px;
		font-size: 14px;
		text-align: left;
	}
}