@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&family=Caveat&family=Barlow:wght@400;500&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@4.0.0/dist/css/yakuhanjp.css');

:root {
	--font-family: YakuHanJP, "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo,sans-serif;
	--font-family-en: "Roboto", sans-serif;
	--font-family-en-hand: "Caveat", cursive;
	--main-color: #222;
	--accent-color: #eb9600;
	--sub-color: #79490e;
	--point-color: #f4b500;
	--section-bg: #faf8f1;
	--section-bg-yel: #fabe00;
	--lettering-base: .03em;
	--lettering-en: .08em;
	--section-padding: 115px;
	--section-padding-sp: 10.417vw;
	--section-top-padding: 125px;
	--section-top-padding-sp: 10.666666vw;
	--whole-padding: 5%;
	--whole-padding-sp: 4.691vw;
	--top-height: 90px;
	--top-height-mid: 80px;
	--top-height-sp: 14.66666vw;
}
body {
	line-height: 1.85;
	letter-spacing: var(--lettering-base);
	font-size: 1.6rem;
	font-family: var(--font-family);
	font-weight: 500;
	color: var(--main-color);
}
.wrap {
	display: flex;
}
.fits {
	justify-content: space-between;
}
.vertical {
	align-items: center;
}
.return {
	flex-flow: row wrap;
}
.column {
	flex-direction: column;
}
.midst {
	justify-content: center;
}
.reverse {
	flex-direction: row-reverse;
}
.gridbox {
	display: grid;
}
section, .section {
	padding: var(--section-padding) 0;
}
.top-section {
	padding-top: var(--section-top-padding);
}
.container {
	margin: 0 auto;
	padding: 0 5%;
	width: 100%;
	max-width: 2000px;
}
.turn {
	background: var(--section-bg);
}
.movie {
	background: var(--section-bg-yel);	
}
.en {
	letter-spacing: var(--lettering-en);
	font-family: var(--font-family-en);
}
.heading, .head-subtxt {
	text-align: center;
}
.heading {
	line-height: 1;
	font-weight: 900;
	font-size: 6.0rem;
	font-size: clamp(1.6rem, 0.051rem + 6.61vw, 6rem);
	color: var(--accent-color);
}
.heading.en {
	letter-spacing: .06em;
}
.head-subtxt {
	margin: .55em 0 60px;
	line-height: 1.4;
	font-size: 2.3rem;
	font-size: clamp(1.2rem, 0.813rem + 1.65vw, 2.3rem);
	font-weight: 700;
	color: var(--sub-color);
}
.head-color .heading, .head-color .head-subtxt {
	color: #fff;
}
.newline {
	display: inline-block;
}
.emphasis {
	color: var(--accent-color);
}
/* index */
html, body {
	height: 100%;
}
header {
	position: relative;
	padding: 0 60px;
	height: var(--top-height);
	box-shadow: 0px 3px 18px rgba(34, 34, 34, 0.6);
	z-index: 2;
}
h1 {
	line-height: 0;
}
h1 a {
	display: block;
}
.gnavilist li {
	letter-spacing: .07em;
	font-weight: 700;
}
.gnavilist__item + li {
	margin-left: 50px;
	margin-left: 2.97619vw;
}
.topvisual {
	width: 100%;
	height: calc(100% - var(--top-height));
}
.topvisual__wrap {
	width: 100%;
	height: 100%;
	background: url(assets/images/index/topimage.jpg) no-repeat center center;
	background-size: cover!important;
}
.topvisual__wrap__catch {
	width: 100%;
	max-width: 800px;
}
.topvisual__wrap__catch__txt {
	-webkit-filter: drop-shadow(2px 2px 5px rgb(0, 0, 0, 0.45));
	filter: drop-shadow(2px 2px 5px rgb(0, 0, 0, 0.45)); 	
}
.topvisual__wrap__catch__txt img {
	width: 100%;	
}
.catch-logo {
	width: 10.84vw;
}
.catch-en {
	margin: 22px 0 0 35px;
	width: 26.623vw;
}
.sp-catch {
	display: none;
}
@media screen and (max-width: 1679px) {
	.topvisual__wrap__catch {
		max-width: 100%;
	}
	.catch-logo {
		width: 182px;
	}
	.catch-en {
		width: 447px;
	}
}
.marker {
	display: inline-block;
}
.marker::after {
	content: "";
	display: block;
	margin-top: .3em;
	width: 100%;
	height: 2px;
	background: #d9d913;
}
.lead__catch, .lead__txt {
	text-align: center;
}
.lead__catch__txt {
	line-height: 1.7;
	letter-spacing: .15em;
	font-weight: 700;
	font-size: 3.7rem;
	font-size: clamp(1.5rem, 0.725rem + 3.31vw, 3.7rem);
}
.lead-logo {
	margin: 0 auto 40px;
	max-width: 186px;
	width: 22%;
}
.product-item {
	margin: 0 20px;	
}
.lead__productlist {
	margin: 70px 0 65px;
}
.lead__txt {
	padding-bottom: 1em;
	line-height: 2.6;
	font-size: 1.9rem;
	font-size: clamp(1.4rem, 1.224rem + 0.75vw, 1.9rem);
}
.lead__img {
	position: relative;
	margin-top: var(--section-padding);
}
.lead__img__txt {
	position: absolute;
	line-height: 1;
	letter-spacing: .07em;
	font-family: var(--font-family-en-hand);
	font-size: 4.7rem;
	font-size: clamp(1.6rem, 0.508rem + 4.66vw, 4.7rem);
	transform: rotate( -6deg );
}
@media screen and (min-width: 1680px) {
	.lead__img__txt {
		font-size: 5.2rem;
	}
}
.txt-anniversary {
	top: 20px;
	left: 110px;
}
.txt-thankyou {
	bottom: 30px;
	right: 200px;
}
.lead__img__list {
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
.lead__img__list__item:nth-child(1) {
	order: 3;
}
.lead__img__list__item:nth-child(2) {
	margin-top: 140px;
	order: 2;
}
.lead__img__list__item:nth-child(3) {
	margin-top: 280px;
	order: 1;
}
.lead__img__list__item:nth-child(4) {
	margin-top: -280px;
	order: 6;
}
.lead__img__list__item:nth-child(5) {
	margin-top: -140px;
	order: 5;
}
.lead__img__list__item:nth-child(6) {
	order: 4;
}
.lead__img__list__item img {
	width: 100%;
	border-radius: 15px;
}
.message__section__img {
	margin-bottom: 90px;
	width: 100%;
	height: 560px;
	border-radius: 26px;
	background: url(assets/images/index/message202506.jpg) no-repeat right 2.5%;
	background-size: cover!important;
}
.message__section__img__catch {
/* 	margin-left: 110px; */
	margin: 110px 0 0 110px;
	line-height: 1;
	font-size: 3.4rem;
	font-size: clamp(1.3rem, 0.561rem + 3.15vw, 3.4rem);
	font-weight: 700;
}
.message__section__img__catch > span {
	display: inline-block;
	margin: 6px 0;
	padding: .45em .55em .45em .75em;
	background: #fff;
}
.message__section__body {
	margin: 0 auto;
	max-width: 850px;
	width: 100%;
	line-height: 2.5;
	font-size: 1.8rem;
	font-size: clamp(1.4rem, 1.259rem + 0.6vw, 1.8rem);
}
.message__section__body__txt + p:not(.message-name) {
	margin-top: 2.1em;
}
.message-name {
	margin-top: 2.5em;
	padding-top: .5em;
	text-align: right;
	line-height: 1;
	font-size: clamp(1.3rem, 1.159rem + 0.6vw, 1.7rem);
}
.company-name, .director {
	display: block;
}
/*
.president {
	margin-left: 1em;
}
*/
.company-name, .president-name {
/*
	font-size: 1.8rem;
	font-size: clamp(1.4rem, 1.259rem + 0.6vw, 1.8rem);
*/
	font-size: 2.1rem;
	font-size: clamp(1.5rem, 1.289rem + 0.9vw, 2.1rem);
}
.director {
	margin-top: .85em;
}
.director + .director {
	margin-top: .7em;
}
.president-name {
	margin-left: 1em;
/*
	font-size: 2.4rem;
	font-size: clamp(1.5rem, 1.183rem + 1.35vw, 2.4rem);
*/
}
.movie-wrap {
	margin: 0 auto;
	max-width: 960px;
}
.movie-box {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.movie-box.before-release {
	padding: 0;
	height: 480px;
	background: #fff;
}
.movie-box.before-release p {
	font-size: 4.4rem;
	font-size: clamp(1.4rem, 0.157rem + 5.3vw, 4.4rem);
	font-weight: bold;
	color: #fabe00;
}
.movie-box iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.history__section {
	grid-template-columns: 1.1fr 1fr 1.1fr;
	grid-auto-rows: 660px;
}
@media screen and (min-width: 1680px) {
	.history__section {
		grid-auto-rows: 760px;
	}
}
.history__section__img figure {
	height: 50%;
	background-size: cover;
}
.history-img1 {
	background: url(assets/images/index/history_image1.jpg) no-repeat center center;
}
.history-img2 {
	background: url(assets/images/index/history_image2.jpg) no-repeat center center;
}
.history-img3 {
	background: url(assets/images/index/history_image3.jpg) no-repeat center center;
}
.history-img4 {
	background: url(assets/images/index/history_image4.jpg) no-repeat center center;
}
.history__section__head {
	background: var(--accent-color);
	text-align: center;
	color: #fff;
}
.history__section__head__wrap {
	padding: 2vw;
	width: 100%;
	font-size: 1.7rem;
}
.history .head-subtxt {
	margin-bottom: 45px;
}
.history-link a {
	display: block;
	margin: 20px auto 0;
	padding: .6em;
	max-width: 280px;
	width: 100%;
	border: solid 2px #fff;
	font-weight: 700;
	font-size: 1.9rem;
	font-size: clamp(1.5rem, 1.359rem + 0.6vw, 1.9rem);
	color: #fff;
}
.next {
	width: 100%;
	height: 740px;
	background: url(assets/images/index/next100year.jpg?v2) no-repeat center bottom;
	background-size: cover;
}
.next__section {
	text-align: center;
}
.next__section__head {
	margin-bottom: .8em;
	letter-spacing: 0.15em;
	font-weight: 700;
	font-size: 4.7rem;
	font-size: clamp(1.6rem, 0.508rem + 4.66vw, 4.7rem);
}
.next__section__txt {
	line-height: 2.6;
	font-size: 1.9rem;
	font-size: clamp(1.4rem, 1.224rem + 0.75vw, 1.9rem);
}
.prouse__list {
	padding: 100px 0 75px;
}
.prouse__list__item {
	margin: 0 20px;
}
.link__list {
	width: 100%;
}
.linkbtn {
	width: calc((100% - 40px) / 2);
}
.linkbtn a {
	position: relative;
	display: block;
	padding: 1.47em .5em;
	background: var(--point-color);
	text-align: center;
	font-weight: 700;
	font-size: 2.4rem;
	color: #fff;
}
.linkbtn a::after {
	content: "";
	position: absolute;
	right: 40px;
	top: calc(50% - 8px);
	width: 10px;
	height: 16px;
	background: url(assets/images/arrow.svg) no-repeat;
}
.linkbtn span {
	position: relative;
	top: -.1em;
	margin-left: 1.5em;
	font-size: 1.8rem;
}
.company-link a {
	background: var(--accent-color);
}
footer {
	padding: 50px 0;
	text-align: center;
}
.copyright {
	margin-top: 1.4em;
	letter-spacing: .05em;
	font-size: 1.2rem;
	font-size: clamp(1rem, 0.917rem + 0.35vw, 1.2rem);
	font-weight: 400;
}
/* history */
.pagehead {
	place-content: center;
	place-items: center;
	width: 100%;
	height: 360px;
	background: url(assets/images/history/heading_bg.jpg?v2) no-repeat center 14%;
	background-size: cover;
	color: #fff;
}
.pagehead__title, .pagehead__subtxt {
	color: #fff;	
}
.pagehead__title {
	margin-top: 18px;
}
.pagehead__subtxt {
	margin-bottom: 0!important;
}
.progress {
	padding: 85px 0 40px;
	width: 100%;
	background: #f6f6ee;
}
.progress__section {
	text-align: center;
}
.period-navi {
	width: 100%;
	gap: 15px;
	grid-template-columns: repeat(5, 1fr);
	text-align: center;
}
.period-name a {
	position: relative;
	width: 100%;
	height: 73px;
	border: 2px solid;
	border-image: linear-gradient(to right, var(--point-color), var(--accent-color)) 1;
	letter-spacing: .12em;
	font-size: 2.1rem;
	color: #eb9200;
	z-index: 0;
}
.period-name a::before, .period-name a::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: -1;
}
.period-name a::after {
	background: linear-gradient(to right, var(--point-color), var(--accent-color));
	z-index: -2;
}
.period-name.current a {
	color: #fff;
}
.period-name.current a::before {
	content: none;
}
.progress__section__head {
	margin-top: 15px;
}
.progress-title {
	letter-spacing: .14em;
	font-size: 3.7rem;
	font-weight: 700;
}
.progress-title span {
	color: var(--accent-color);
}
.progress__section__head__txt {
	margin-top: .55em;
	font-size: clamp(1.4rem, 1.224rem + 0.75vw, 1.9rem);
}
#period {
	padding-top: 40px;
}
.timeline {
	padding-top: 50px;
	padding-bottom: 60px;
}
.timeline__head {
	position: relative;
	padding: 0 5px 12px;
	padding: 0 5px;
	width: 100%;
	height: 72px;
	border-bottom: solid 1px #d9d913;
	background: #fff;
}
.timeline__head.fix {
	position: sticky;
	top: 0;
	z-index: 2;
}
.timeline__head::after {
	content: '';
	display: block;
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 1px;
	background: #d9d913;
}
.timeline__head__title {
	letter-spacing: .15em;
	font-size: 3.3rem;
	font-weight: 700;
	transition: .4s;
}
.timeline__head.fix .timeline__head__title {
	font-size: 3.1rem;
}
.timeline__head__list__item + li {
	margin-left: 65px;
	transition: .4s;
}
.timeline__head.fix .timeline__head__list__item + li {
	margin-left: 70px;
}
.timeline__head__list__item a {
	font-size: 3.2rem;
	font-weight: normal;
	font-weight: 400;
	color: var(--sub-color);
	transition: .4s!important;
}
.timeline__head.fix .timeline__head__list__item a {
	font-size: 3.0rem;
}
.timeline__head__list__item a::after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	margin-left: 16px;
	width: 12px;
	height: 7px;
	background: url('assets/images/history/year_arrow.svg');
	background-size: cover!important;
	transition: .4s;
}
.timeline__head.fix .timeline__head__list__item a::after {
	content: none;
}
.timeline__head.fix .js-nav a {
	color: #ccbfae;
}
.timeline__head.fix .js-nav a.active {
	color: var(--sub-color);
}
.timeline__body__wrap {
	padding-top: 34px;
}
.sp-history-menu {
	display: none;
}
.year-number {
	line-height: 1;
	font-family: "Barlow", sans-serif;
}
.period {
	position: relative;
}
.period::before, .period::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	width: 8px;
	height: 100%;
	z-index: -1;
}
.period::before {
	left: calc(50% - 16px);
	background: var(--point-color);
}
.period::after {
	right: calc(50% - 16px);
	background: var(--accent-color);
}
.period__year {
	padding: 60px 0 40px;
	background: #fff;
	text-align: center;
	line-height: 1;
	font-size: 5.4rem;
	color: var(--sub-color);
}
.story-list {
	overflow: hidden;
	width: 100%;
}
.story {
	clear: both;
	width: 50%;
}
.story + li, .story.exception {
	padding-bottom: 4.861111vw;
}
.story + li.mt-75 {
	margin-top: -5.208333vw;
}
.story + li.mt-115 {
	margin-top: -7.986111vw;
}
.story + li.mt-135 {
	margin-top: -9.375vw;
}
.story + li.mt-185 {
	margin-top: -12.847222vw;
}
.story + li.mt-215 {
	margin-top: -14.930556vw;
}
.story + li.mt-235 {
	margin-top: -16.319444vw;
}
.story + li.mt-255 {
	margin-top: -17.708333vw;
}
.story + li.mt-275 {
	margin-top: -19.097222vw;
}
.story + li.mt-305 {
	margin-top: -21.180556vw;
}
.story + li.mt-365 {
	margin-top: -25.347222vw;
}
.l-side {
	float: left;
}
.r-side {
	float: right;
}
.story-year {
	position: relative;
	padding-bottom: 12px;
	width: 100%;
	text-align: center;
	line-height: 1.65;
	font-weight: normal;
	font-weight: 400;
	color: var(--sub-color);	
}
.story-year::before {
	content: '';
	position: absolute;
	bottom: -3px;
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sub-color);
}
.l-side .story-year::before {
	right: -3px;	
}
.r-side .story-year::before {
	left: -3px;	
}
.story-year::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 1px;
	background: var(--sub-color);
}
.west-cal {
	font-size: 4.1rem;
}
.jp-cal {
	display: block;
	font-size: 1.5rem;
}
.story-details {
	padding-top: 3.125vw;
	text-align: center;
}
.l-side .story-year, .l-side .story-details {
	padding-left: 13.425926%;
	padding-right: calc(13.425926% + 16px);
}
.r-side .story-year, .r-side .story-details {
	padding-left: calc(13.425926% + 16px);
	padding-right: 13.425926%;
}
.story-body, .readmore__body {
	font-size: 1.8rem;
	font-size: clamp(1.4rem, 1rem + 0.5vw, 1.8rem);
}
.storyimg {
	display: inline-block;
	vertical-align: middle;
	margin-top: 25px;
	margin-top: 1.736111vw;
	width: 100%;
}
.storyimg img {
	border-radius: 11px;
	width: 100%;
}
.vertical-img {
	margin-left: auto;
	margin-right: auto;
	width: 64.444444%
}
.product-img17 {
	width: 17%;
}
.product-img19 {
	width: 19%;
}
.product-img20 {
	width: 20%;
}
.product-img27 {
	width: 27%;
}
.product-img28 {
	width: 28%;
}
.product-img29 {
	width: 29%;
}
.product-img30 {
	width: 30%;
}
.product-img32 {
	width: 32%;
}
.product-img33 {
	width: 33%;
}
.product-img34 {
	width: 34%;
}
.product-img35 {
	width: 35%;
}
.product-img37 {
	width: 37%;
}
.product-img38 {
	width: 38%;
}
.product-img40 {
	width: 40%;
}
.product-img42 {
	width: 42%;
}
.product-img44 {
	width: 44%;
}
.product-img45 {
	width: 45%;
}
.product-img46 {
	width: 46%;
}
.product-img50 {
	width: 50%;
}
.product-img53 {
	width: 53%;
}
.product-img54 {
	width: 54%;
}
.product-img55 {
	width: 55%;
}
.product-img57 {
	width: 57%;
}
.product-img60 {
	width: 60%;
}
.product-img62 {
	width: 62%;
}
.product-img63 {
	width: 63%;
}
.product-img64 {
	width: 64%;
}
.product-img65 {
	width: 65%;
}
.product-img86 {
	width: 86%;
}
.afterimg {
	margin-left: 3.6%;
}
.afterimg-w {
	margin-left: 6%;
}
.cont-hide {
	display: none;
	margin-top: 25px;
	background: rgb(217, 217, 19, .65);
	background: #f5f5dd;
	border-radius: 5px;
	padding: 1.5em 1.4em 1.4em;
}
.accordion {
	display: inline-block;
	margin-top: 2.013889vw;
	padding: 8px;
	width: 132px;
	border: solid 1px var(--accent-color);
	border-radius: 19px;
	background: #fff;
	font-size: 1.5rem;
	text-align: center;
	color: var(--accent-color);
	cursor: pointer;
	transition: .5s;
}
.accordion::after {
	content: 'もっと見る';
	font-weight: 500;
	transition: .2s;
}
.accordion.on-click::after {
	content: '✕ 閉じる';
}
.timeline__link {
	margin-top: 65px;
}
.circle-btn {
	position: relative;
	overflow: inherit!important;
}
.c-btn-txt {
	letter-spacing: .12em;
	font-size: 2.7rem;
	font-weight: 700;
	transition: transform .3s cubic-bezier(.63,.19,.4,.99);
}
.c-btn-txt span {
	font-weight: normal;
	font-weight: 400;
}
.btn-icon {
	position: relative;
	margin-left: 20px;
	width: 46px;
	height: 46px;
}
.btn-icon-base {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: 50%;
	background: #333;
	transition: transform .3s cubic-bezier(.63,.19,.4,.99);
	z-index: 1;
}
.btn-icon-arrow {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 20px 12px;
	background-image: url(assets/images/history/arrow.svg);
	z-index: 2;
}
.periodlink {
	padding: 52px 0 60px;
	width: 100%;
	background: #f6f6ee;
	text-align: center;
}
.periodlink .progress-title {
	margin-bottom: 1.1em;
	font-size: 3.0rem;
}
@media screen and (min-width: 1366px) {
	.gnavilist li a:hover, .period-name a::before, .period-name a::after {
		transition: .5s;
	}
	.gnavilist li a:hover {
		color: var(--sub-color);
	} 
	.period-name a:hover {
		color: #fff;
	}
	.period-name a:hover::before {
		opacity: 0;
	}
	.circle-btn:hover .btn-icon-base {
		transform: scale(1.3);
	}
	.linkbtn {
		transition: opacity .5s ease;
	}
	.linkbtn:hover {
		opacity: .6;
	}	
	.history-linkbtn {
		position: relative;
		transition: .4s ease;
	}
	.history-linkbtn:hover {
		background: #fff;
		color: var(--accent-color);
	}
	.btntxt {
		position: relative;
	}
}
.no-trans:hover img, a img:hover {
	opacity: 1;
}
/* loading */
.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #faf8f1;
	z-index: 999;
}
.nikkoku80th__logo {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 200px;
}
/* animation */
.js-fadeup {
	position: relative;
	overflow: hidden;
	display: block;
	border-radius: 15px;
	z-index: 1;
}
.js-fadeup::after {
	content: '';
	width: 100%;
	height: 102%;
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
	transform: translate3d(0, 0%, 0);
}
.js-fadeup.js-after::after {
	transform: translate3d(0, -102%, 0);
}
.js-fadeup.js-after img {
	opacity: 1;
	transform: scale(1);
}
.js-fadeup img {
	display: block;
	opacity: 0;
	transform: scale(1.3);
	transition: transform 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) 1s, opacity 1.2s cubic-bezier(0.473, 0.427, 0, 0.993) 0.8s;
	object-fit: cover;
}
.ttl__clip {
	display: inline-block;
	transition: clip-path 0.4s cubic-bezier(0.18, 0.06, 0.23, 1) 0.2s;
	clip-path: inset(0 100% 0 0);
}
.ttl__clip.type2 {
	transition: clip-path 0.5s cubic-bezier(0.18, 0.06, 0.23, 1) 0.2s;
}
.ttl__clip.slid__open {
	clip-path: inset(0);
}
/* Safari */
_::-webkit-full-page-media, _:future, :root .timeline__head__title {
	position: relative;
	top: .12em;
}

/*-------------------------------------------------
 * mediaqueriess
-------------------------------------------------*/
@media screen and (max-width: 1279px) {
	section, .section {
		padding: var(--section-padding-sp) 0;
	}
	.top-section {
		padding-top: var(--section-top-padding-sp);
	}
	.container {
		padding: 0 4.691vw;
	}
	.head-subtxt {
		margin: .35em 0 5.208333vw;
	}
	/* index */
	header {
		height: var(--top-height-mid);
		padding: 0 var(--whole-padding-sp);
	}
	.headbox {
		width: 100%;
		height: 100%;
		z-index: 9999;
	}
	.no-scroll .headbox {
		background: #fff;
	}
	.headbox__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		-webkit-transition: all .4s;
		transition: all .4s;
		z-index: 9999;
	}
	.headbox__toggle__trigger, .headbox__toggle__trigger span {
		display: inline-block;
		-webkit-transition: all .4s;
		transition: all .4s;
	}
	.headbox__toggle__trigger {
		position: relative;
		width: 38px;
		height: 27px;
		cursor: pointer;
	}
	.headbox__toggle__trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		border-radius: .001%;
		background: var(--accent-color);
		z-index: 9999;
	}
	.headbox__toggle__trigger span:nth-of-type(1) {
		top: 0;
	}
	.headbox__toggle__trigger span:nth-of-type(2) {
		top: 12px;
	}
	.headbox__toggle__trigger span:nth-of-type(2)::after {
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		width: 100%;
		height: 3px;
		border-radius: .001%;
		background: var(--accent-color);
		-webkit-transition: all .4s;
		transition: all .4s;
	}
	.headbox__toggle__trigger span:nth-of-type(3) {
		bottom: 0;
	}
	.headbox__toggle__trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(8px) scale(0);
		transform: translateY(8px) scale(0);
	}
	.headbox__toggle__trigger.active span:nth-of-type(2) {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.headbox__toggle__trigger.active span:nth-of-type(2)::after {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.headbox__toggle__trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(-8px) scale(0);
		transform: translateY(-8px) scale(0);
	}
	.hide {
		overflow: hidden;
		visibility: hidden;
		opacity: 0;
	}
	.animation {
		-webkit-transition-property: opacity, visibility;
		transition-property: opacity, visibility;
		-webkit-transition-duration: .3s;
		transition-duration: .3s;
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
	}
	.no-scroll {
		overflow: hidden;
	}
	#gnavi {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		margin: 0;
		padding-top: var(--top-height-mid);
		width: 100%;
		height: 100%;
		-webkit-overflow-scrolling: touch;
		overflow: auto;
		background: #fff;
		z-index: 99;
	}
	#gnavi nav {
		display: flex;
		align-items: center;
		margin: 0 auto;
		width: 100%;
		height: calc(100% - var(--top-height-mid));
	}
	.gnavilist {
		flex-flow: row wrap;
		justify-content: space-between;
		margin: 0;
		padding: 0 8vw;
		width: 100%;
		max-height: 100%;
	}
	.gnavilist__item, .gnavilist__item + li {
		margin: 0;
		width: calc((100% - 22px) / 2);
		height: auto;
		border-top: solid 1px var(--accent-color);
		border-bottom: solid 1px var(--accent-color);
		text-align: center;
	}
	.gnavilist li a {
		display: block;
		padding: 1.15em 0;
		width: 100%;
		height: auto;
	}
	.gnavilist__item.gn-history {
		margin-top: 50px;
		width: 100%;
	}
	.gn-history a {
		background: var(--accent-color);
		color: #fff;
	}
	.topvisual {
		height: calc(100% - var(--top-height-mid));
	}
	.topvisual__wrap {
		justify-content: flex-start;
		align-items: flex-end;
		padding: 0 var(--whole-padding-sp) var(--whole-padding-sp);
		background-position: 85.5% 46%;
	}
	.topvisual__wrap__catch {
		flex-direction: column;		
		justify-content: flex-end;
		align-items: flex-start;
	}
	.catch-logo {
		width: 16.2109375vh;
	}	
	.catch-en {
		margin: 1.46484375vh 0 0 0;
		width: 31.8359375vh;
	}
	.lead-logo {
		margin-bottom: 3.127vw;
	}
	.lead__catch__txt {
		letter-spacing: .1em;
	}
	.product-item {
		margin: 0 1.564vw;
	}
	.lead__productlist {
		margin: 60px 0 55px;
	}
	.lead__txt, .next__section__txt {
		line-height: 2.4;
	}
	.lead__img {
		margin-top: 11.719vw;
	}
	.lead__img__list {
		gap: 2.083333vw;
	}
	.lead__img__list__item:nth-child(2) {
		margin-top: 10.946vw;
	}
	.lead__img__list__item:nth-child(3) {
		margin-top: 21.892vw;
	}
	.lead__img__list__item:nth-child(4) {
		margin-top: -21.892vw;
	}
	.lead__img__list__item:nth-child(5) {
		margin-top: -10.946vw;
	}
	.txt-anniversary {
		top: -1.562vw;
		left: 4.691vw;
	}
	.txt-thankyou {
		bottom: -0.651vw;
		right: 13.292vw;
	}
	.message__section__img {
/* 		align-items: flex-end; */
		margin-bottom: 7.037vw;
		height: 430px;
	}
	.message__section__img__catch {
/* 		margin-left: 4vw; */
		margin: 4.8vw 0 0 4.8vw;
	}
	@media screen and (max-width: 1023px) {
		.message__section__img {
			align-items: flex-end;
		}
		.message__section__img__catch {
			margin: 0 0 4.2vw 4.5vw;
		}	
	}
	@media screen and (max-width: 959px) {
		.message__section__img {
/* 			height: 355px; */
			height: 380px;
/* 			background-position: left center; */
		}		
	}	
	.message__section__img__catch > span {
		margin: 4px 0;
	}
	.message__section__body {
		line-height: 2.3;
	}
	.message__section__body__txt + p:not(.message-name) {
		margin-top: 1.5em;
	}
	.message-name {
		margin-top: 2em;
	}
	.history__section {
		grid-template-columns: 1fr 1.3fr 1fr;	
		grid-auto-rows: minmax(450px, 45vw);
	}
	.history__section__head__wrap {
		padding: 3vw 4vw;
	}
	.history .head-subtxt {
		margin-bottom: 3.518vw;
	}
	.history-link a {
		margin-top: 1.564vw;
		padding: .5em;
	}
	.next {
		padding: 15vw 0;
		height: auto;
	}
	.next__section__head {
		margin-bottom: .4em;
		letter-spacing: 0.1em;
	}
	.prouse__list {
		padding: 9.115vw 0 6.51vw;
	}
	.linkbtn {
		width: 49%;
	}
	.linkbtn a {
		padding: 1.1em .5em;
		font-size: 2.0rem;
	}
	.linkbtn a::after {
		right: 3vw;
	}
	.linkbtn span {
		margin-left: 1em;
		font-size: 1.7rem;
	}
	footer {
		padding: 4.166666vw 0 3.645833vw;
	}
	.movie-box.before-release {
		height: 45vw;
	}
	/* history */
	.pagehead {
		height: 300px;
		background-position-x: 82%;
	}
	.progress {
		padding: 7.8125vw 0 28px;
	}
	.progress__section__logo {
		margin: 0 auto;
		width: 126px;
	}
	.progress__section__head {
		margin-top: 10px;
	}
	.progress-title {
		font-size: 3.2rem;
	}
	.progress__section__head__txt {
		margin-top: .3em;
	}
	#period {
		padding-top: 28px;
	}
	.period-navi {
		gap: 10px;
	}
	.period-name a {
		height: 2.85em;
		line-height: 2.85em;
		font-size: 1.8rem;
	}
	.timeline {
		padding-top: 5.208333vw;
		padding-bottom: 6.510417vw;
	}
	.timeline__head {
		height: 66px;
	}
	.timeline__head__title {
		font-size: 2.8rem;
	}
	.timeline__head__list__item + li {
		margin-left: 35px;
	}
	.timeline__head__list__item a {
		font-size: 2.7rem;
	}
	.timeline__head__list__item a::after {
		margin-left: 9px;
		width: 10px;
		height: 6px;
	}
	.timeline__head.fix .timeline__head__title {
		font-size: 2.8rem;
	}
	.timeline__head.fix .timeline__head__list__item + li {
		margin-left: 32px;
	}
	.timeline__head.fix .timeline__head__list__item a {
		font-size: 2.7rem;
	}
	.timeline__body__wrap {
		padding-top: 1.953125vw;
	}
	.period::before, .period::after {
		width: 6px;
	}
	.period::before {
		left: calc(50% - 13px);
	}
	.period::after {
		right: calc(50% - 13px);
	}
	.period__year {
		padding: 6.25vw 0 4.557292vw;
		font-size: 4.7rem;
	}
	.story + li, .story.exception  {
		padding-bottom: 7.161458vw;
	}	
	.story-details {
		padding-top: 4.166667vw;
		line-height: 1.8;
	}
	.l-side .story-year, .l-side .story-details {
		padding-left: 8.62069%;
		padding-right: calc(8.62069% + 13px);
	}
	.r-side .story-year, .r-side .story-details {
		padding-left: calc(8.62069% + 13px);
		padding-right: 8.62069%;
	}
	.west-cal {
		font-size: 3.6rem;
	}
	.jp-cal {
		font-size: 1.4rem;
	}
	.story-body, .readmore__body {
		font-size: 1.6rem;
	}
	.storyimg, .multiple .storyimg + .storyimg {
		margin-top: 3.255208vw;
	}	
	.storyimg + .storyimg {
		margin-top: 1.822917vw;
	}
	.accordion {
		margin-top: 22px;
		padding: 6px;
		width: 122px;
		font-size: 1.4rem;
	}
	.timeline__link {
		margin-top: 45px;
	}
	.c-btn-txt {
		font-size: 2.3rem;
	}
	.btn-icon {
		margin-left: 12px;
		width: 42px;
		height: 42px;
	}
	.periodlink {
		padding: 4.166667vw 0 5.598958vw;
	}
	.periodlink .progress-title {
		margin-bottom: .7em;
		font-size: 2.6rem;
	}
}
@media screen and (max-width: 767px) {
	/* index */
	h1 {
		width: 70vw;
	}
	.headbox__toggle__trigger {
		width: 28px;
		height: 20px;
	}
	.headbox__toggle__trigger span, .headbox__toggle__trigger span:nth-of-type(2):after {
		height: 2px;
	}
	.headbox__toggle__trigger span:nth-of-type(2) {
		top: 9px;
	}
	.gnavilist li {
		font-size: 1.4rem;
	}
	.gnavilist__item, .gnavilist__item + li {
		width: 100%;
	}
	.gnavilist__item:first-child {
		border-bottom: none;
	}
	.gnavilist li a {
		padding: .9em 0;
	}
	.gnavilist__item.gn-history {
		margin-top: 30px;
	}
	@media screen and (max-width: 480px) {
		header {
			height: var(--top-height-sp);
		}
		.headbox__toggle__trigger {
			width: 24px;
		}
		#gnavi {
			padding-top: var(--top-height-sp);
		}
		#gnavi nav, .topvisual {
			height: calc(100% - var(--top-height-sp));
		}
	}
	.topvisual__wrap {
		background-image: url(assets/images/index/topimage_sp.jpg);
	}
	.topvisual__wrap__catch {
		width: 60vw;
	}
	.catch-logo {
		width: 13.7931034vh;
	}
	.catch-en {
		width: 26.9865067vh;
	}
	.pc-catch {
		display: none;
	}
	.sp-catch {
		display: block;
	}
	.lead {
		padding-bottom: 10.87vw;
	}
	.lead-logo {
		max-width: 160px;
		width: 30%;
	}
	.product-list {
		flex-flow: row wrap;
		margin: 0 auto;
		max-width: 370px;
		width: 90%;		
	}
	.product-item img {
		width: auto;
		height: 30vw;
		max-height: 150px;
	}
	.product-item:nth-child(n+4) {
		margin-top: 3.128vw;
	}
	.lead__productlist {
		margin: 8.454vw auto 7.246vw;
	}
	.lead__txt {
		padding: .5em 0;
		line-height: 2;
		text-align: justify;
	}
	.lead__txt .newline {
		display: inline;
	}
	.lead__txt br:not(.maintain) {
		display: none;
	}
	.lead__img {
		margin-top: 90px;
		margin-top: 21.739vw;
	}
	.lead__img__list {
		gap: 2.666666vw;
		grid-template-columns: repeat(2, 1fr);
	}
	.lead__img__list__item img {
		border-radius: 12px;
	}
	.lead__img__list__item:nth-child(1) {
		order: 2;
	}
	.lead__img__list__item:nth-child(2) {
		margin-top: 10.946vw;
		order: 1;
	}
	.lead__img__list__item:nth-child(3) {
		margin-top: -10.946vw;
		order: 4;
	}
	.lead__img__list__item:nth-child(4) {
		margin-top: 0;
		order: 3;
	}
	.lead__img__list__item:nth-child(5) {
		margin-top: -10.946vw;
		order: 6;
	}
	.lead__img__list__item:nth-child(6) {
		margin-top: 0;
		order: 5;
	}
	.txt-anniversary {
		top: -12vw;
		left: 0;
	}
	.txt-thankyou {
		bottom: -2.415vw;
		right: 10vw;
	}
	.message__section__img {
/* 		height: 260px; */
		height: 300px;
		border-radius: 18px;
		background-position: 94.5% center;
	}
	@media screen and (max-width: 479px) {
		.message__section__img {
			height: 260px;
		}
		.message__section__img__catch {
			margin: 0 0 6vw 6vw;
		}
	}
/*
	.message__section__img__catch {
		margin: 110px 0 0 5vw;
	}
*/
/*
	@media screen and (max-width: 479px) {
		.message__section__img__catch {
			margin: 130px 0 0 6vw;
		}
	}
*/
	.message__section__img__catch > span {
		margin: 3px 0;
		padding: .3em .35em .4em .55em;
	}
	.message__section__body {
		line-height: 2;
	}
	.message__section__body__txt + p:not(.message-name) {
		margin-top: 1.2em;
	}
	.message-name {
		margin-top: 1.5em;
	}
	.company-name {
/* 		display: block; */
		margin-bottom: .75em;
	}
	.president-name {
		margin-left: .65em;
	}
	.history__section {
		display: block;
	}
	.history__section__img {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 34vw;
	}
	.history__section__img figure {
		height: 100%;
	}
	.history__section__head__wrap {
		padding: 8vw 6vw;
		font-size: 1.5rem;
	}
	.history-link a {
		margin-top: 10px;
		padding: .45em;
		border-width: 1px;
	}
	.next__section__txt {
		line-height: 2;
	}
	.prouse__list {
		padding: 10.87vw auto 8.454vw;
		max-width: 460px;
	}
	.prouse__list__item img {
		height: 30vw;
	}
	.link__list {
		display: block;
	}
	.linkbtn {
		width: 100%;
	}
	.linkbtn a {
		padding: .8em .5em;
		font-size: 1.7rem;
	}
	.linkbtn a::after {
		top: calc(50% - 6px);
		right: 5.5vw;
		width: 8px;
		height: 12px;
	}
	.linkbtn span {
		margin-left: 1em;
		font-size: 1.5rem;
	}
	.linkbtn + .linkbtn {
		margin-top: 10px;
	}
	footer {
		padding: 20px 0 15px;
	}
	.footerinner__logo {
		margin: 0 auto;
		max-width: 160px;
		width: 32%;
	}
	.copyright {
		margin-top: .9em;
	}
	/* history */
	.pagehead {
		height: 33.06666vw;
		background-position-x: 38%;
	}
	.pagehead__title {
		margin-top: 8px;
	}
	.progress {
		padding-bottom: 4.691vw;
	}
	.progress__section__logo {
		max-width: 126px;
		width: 90px;
		width: 24vw;
	}
	.progress__section__head {
		margin-top: 5px;
	}
	.progress-title {
		font-size: 2.0rem;
	}
	.progress__section__head__txt {
		line-height: 1.75;
	}
	#period {
		padding-top: 4.691vw;
	}
	.period-navi {
		gap: 7px;
		grid-template-columns: repeat(3, 1fr);
	}
	.period-name a {
		height: 2.3em;
		border-width: 1px;
		line-height: 2.3em;
		font-size: 1.4rem;
	}
	.timeline__head, .timeline__head.fix {
		padding: 0 2px;
		height: 46px;
	}
	.timeline__head__title, .timeline__head.fix .timeline__head__title, .timeline__head__list__item a, .timeline__head.fix .timeline__head__list__item a {
		font-size: 1.9rem;
	}
	.timeline__head__list__item a::after {
		content: none;
	}
	.period::before, .period::after {
		left: 0;
		width: 3px;
	}
	.period::after {
		left: 12px;
		right: auto;
	}
	.period__year {
		padding: 6.25vw 0;
		text-align: left;
		font-size: 3.0rem;
	}
	.story-list {
		overflow: inherit;
	}
	.story {
		padding-left: 8px;
		width: 100%;
	}
	.story {
		margin-top: 0!important;
		padding-bottom: 8.533333vw!important;
	}
	.l-side, .r-side {
		float: none;
	}
	.story-year {
		text-align: left;
	}
	.story-year::before {
		bottom: -2px;
		width: 5px;
		height: 5px;
	}
	.l-side .story-year::before {
		left: -3px;
		right: auto;
	}
	.l-side .story-year, .l-side .story-details, .r-side .story-year, .r-side .story-details {
		padding-left: 30px;
		padding-right: 5px;	
	}
	.west-cal {
		display: inline-block;
		vertical-align: text-top;
		font-size: 2.4rem;
	}
	.jp-cal {
		display: inline-block;
		margin-left: .8em;
		font-size: 1.3rem;
	}
	.story-details {
		padding-top: 6.66666vw;
		text-align: justify;
	}
	.story-body, .readmore__body {
		font-size: 1.5rem;
	}
	.story-body .newline, .readmore__body .newline {
		display: inline;
	}
	.storyimg + .storyimg {
		margin-top: 10px;
	}
	.vertical-img {
		margin-left: inherit;
	}
	.story-photo.multiple {
		justify-content: start;
	}
	.accordion {
		margin-top: 20px;
		padding: 5px;
		width: 98px;
		font-size: 1.3rem;
	}
	.cont-hide {
		margin-top: 13px;
		padding: 1.3em 1.5em;
	}
	.timeline__link {
		justify-content: start;
		margin-top: 20px;
	}
	.c-btn-txt {
		font-size: 1.7rem;
	}
	.btn-icon {
		margin-left: 9px;
		width: 33px;
		height: 33px;
	}
	.btn-icon-arrow {
		background-size: 14px 9px;
	}
	.periodlink .progress-title {
		font-size: 1.9rem;
	}
	.nikkoku80th__logo {
		width: 32vw;
	}
}