@charset "UTF-8";

/*---------------------------------------------------------
Reset
---------------------------------------------------------*/

html {
	/*overflow-x: hidden;*/
	scroll-behavior: smooth;
}

body {
	/*overflow-x: hidden;*/
	background-color: #F8F8F8;
}

.inpagebody {
	background-image: url(../img/bgimg@2x.jpg);
	background-color: #E7E7E7;
	background-repeat: repeat;
	background-position: center;
	background-size: contain;
}

html,
body,
div,
article,
section,
main,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
input,
textarea,
address,
nav,
table,
th,
td,
a,
p,
img,
figure,
span,
em,
small {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

small {
	font-size: 12px;
	line-height: 1.2;
}

.right {
	text-align: right !important;
}

small.kumamon {
	font-size: 60%;
}

main {
	display: block;
}

ul,
li {
	list-style-type: none;
}

table {
	border-collapse: collapse;
}

img {
	border: none;
}

a {
	text-decoration: none;
	cursor: pointer;
}

a,
button {
	outline: none;
}

a:focus,
button:focus {
	outline: none;
}

.mt4 {
	margin-top: 4px !important;
}

.mt8 {
	margin-top: 8px !important;
}

.mt16 {
	margin-top: 16px !important;
}

.mt24 {
	margin-top: 24px !important;
}

.mt40 {
	margin-top: 40px !important;
}

.mt80 {
	margin-top: 80px !important;
}

.mb40 {
	margin-bottom: 40px;
}

.bold {
	font-weight: bold;
}

.res-pc {
	display: block !important;
}

.res-sp {
	display: none !important;
}

.widthSp {
	width: calc(100% - 48px);
	margin: 40px auto;
}

.center {
	text-align: center !important;
}

.center_margin {
	margin: 0 auto;
}

.bold {
	font-weight: bold;
}

@media only screen and (max-width: 959px) {
	.res-pc {
		display: none !important;
	}

	.res-sp {
		display: block !important;
	}

	.widthSp {
		margin: 16px auto;
	}
}


/*---------------------------------------------------------
font
---------------------------------------------------------*/


/*---------------------------------------------------------
common
---------------------------------------------------------*/

html {
	font-size: 62.5%;
}

@media only screen and (min-width: 320px) and (max-width: 414px) {
	html {
		font-size: 2.41546vw;
	}
}

@media screen and (min-width: 768px) and (max-width: 1240px) {
	html {
		font-size: 0.80645vw;
	}
}

body {
	margin: inherit;
	font-size: 1.6rem;
	font-family: 'Noto Sans JP', sans-serif;
	color: #000000;
	line-height: 2;
	letter-spacing: 0.04em;
	min-width: 320px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	word-break: break-word;
	font-weight: 500;
	position: relative;
	/*overflow: hidden;*/
}

@media only screen and (max-width: 959px) {
	body {
		margin: inherit;
		font-size: 1.4rem;
		font-family: 'Noto Sans JP', sans-serif;
		color: #000000;
		line-height: 1.8;
		letter-spacing: 0.04em;
	}
}

img {
	width: 100%;
	vertical-align: bottom;
}

a {
	color: #fff;
	text-decoration: none;
	-webkit-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

a:hover {
	opacity: 0.6 !important;
}

.underline {
	text-decoration: underline;
}

.underline:hover {
	text-decoration: none;
}

.bgwhite {
	background: #fff;
	border-radius: 16px;
	padding: 40px;
}

@media only screen and (max-width: 959px) {
	.bgwhite {
		padding: 24px;
	}
}


/*---------------------------------------------------------
header
---------------------------------------------------------*/

header {
	position: fixed;
	top: 16px;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	width: 100%;
}

header .headerL {
	padding-left: 40px;
	margin-top: 24px;
}

header .headerR {
	/*padding-right: 160px;*/
	margin-top: 34px;
}

header .headerR ul {
	display: flex;
}

header .headerR ul li {
	padding: 0 20px;
}

header .headerR ul li a {
	color: #00030B;
	filter: contrast(.5);
	font-family: futura-pt, sans-serif;
	font-style: normal;
	font-weight: 500;
}

header .headerR ul li a:hover {
	opacity: 0.4;
}

.navcontact {
	position: fixed;
	top: -12px;
	right: -12px;
	z-index: 999;
}

.navcontact .pushcircle {}

.topbar {
	width: 100%;
	height: 8px;
	position: fixed;
	top: 0;
	z-index: 1;
	background-color: #00030B;
}

.btmbar {
	width: 100%;
	height: 8px;
	position: fixed;
	bottom: 0;
	z-index: 1;
	background-color: #00030B;
}


/*---------------------------------------------------------
headerSP
---------------------------------------------------------*/


/* Navbar & Navmenu color */

:root {
	--background-navbar: rgba(0, 3, 11, 0.96);
}

.headersp {
	position: fixed;
	width: 100%;
	height: 64px;
	z-index: 100000;
}


/* Nav items */

.menu {
	list-style: none;
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
	margin-top: 0;
	padding: 120px 8% 0;
	clear: both;
	background: linear-gradient(#2e3a52 0%, #0e1524 100%);
	transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	transform: scale(1, 0);
	transform-origin: top;
	z-index: 9;
	text-align: left;
	display: flex;
	height: 100vh;
}


/* Hamburger menu button */

.menu-btn:checked~.menu {
	transform: scale(1, 1);
	transform-origin: top;
	transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}


/* Hamburger menbu text */

.menu a {
	text-decoration: none;
	font-weight: 500;
	letter-spacing: 2px;
	font-size: 16px;
	text-transform: capitalize;
	color: #ddd;
	opacity: 0;
	transition: 0.5s;
	font-family: futura-pt, sans-serif;
	font-style: normal;
	font-weight: 500;
}

.menu li {
	padding: 16px 0;
	margin: 0 48px;
	opacity: 0;
	transition: 0.5s;
}

.menu-btn:checked~.menu a,
.menu-btn:checked~.menu li {
	opacity: 1;
	transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
	text-align: left !important;
	margin-top: 16px;
	line-height: 1.6;
}

.menu .button_solid019 a {
	max-width: 100%;
}

.menu-btn {
	display: none;
}

.menu-icon {
	display: inline-block;
	position: absolute;
	cursor: pointer;
	padding: 40px 26px;
	background-color: #00030B;
	right: 40px;
	top: 24px;
	z-index: 10;
	border-radius: 40px;
}

.navicon {
	display: block;
	height: 2px;
	width: 32px;
	position: relative;
	transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.navicon:before,
.navicon:after {
	content: "";
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	background: #ddd;
	transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.navicon:before {
	top: 6px;
}

.navicon:after {
	bottom: 6px;
}


/* Hamburger Menu Animation Start */

.menu-btn:checked~.menu-icon .navicon:before {
	transform: rotate(-45deg);
}

.menu-btn:checked~.menu-icon .navicon:after {
	transform: rotate(45deg);
}

.menu-btn:checked~.menu-icon:not(.steps) .navicon:before {
	top: 0;
}

.menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
	bottom: 0;
}

.menu-btn:checked~.menu-icon .navicon {
	transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}


/* Hamburger Menu Animation End */


/* Navbar Container */

.navtext-container {
	width: 100%;
	height: 52px;
	position: absolute;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
}


/* Navbar Text */

.navtext {
	position: absolute;
	left: 40px;
	top: 20px;
}

.navtext img {
	width: 200px;
	margin-top: 8px;
}

.mailicon {
	position: absolute;
	right: 88px;
	top: 28px;
}

.navcinzel_big {
	font-family: 'Cinzel', serif !important;
	font-weight: normal !important;
	font-size: 44px !important;
	letter-spacing: 0.04em;
	text-align: left;
	color: #e9eadd;
}


/*==================================================
　5-3-3 左から右に線が伸びる（下部）
===================================*/

.gnavi li {
	margin: 0;
	padding: 8px 0;
	font-family: "Noto Serif JP";
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 0.04em;
	line-height: 32px;
	text-align: left;
	color: #e9eadd;
}

.gnavi li a {
	/*線の基点とするためrelativeを指定*/
	position: relative;
	padding-bottom: 8px;
	color: #e9eadd;
}

.gnavi li.current a,
.gnavi li a:hover {
	color: #D5D6C6;
}

.gnavi li a::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	bottom: 0;
	left: 0%;
	/*線の形状*/
	width: 100%;
	height: 1px;
	background: #E6E7D9;
	/*アニメーションの指定*/
	transition: all .3s;
	transform: scale(0, 1);
	/*X方向0、Y方向1*/
	transform-origin: left top;
	/*左上基点*/
	z-index: 100;
}


/*現在地とhoverの設定*/

.gnavi li.current a::after,
.gnavi li a:hover::after {
	transform: scale(1, 1);
	/*X方向にスケール拡大*/
}

span.en_cinzel {
	font-family: 'Cinzel', serif;
	padding-right: 16px;
	font-size: 24px;
}

@media screen and (max-width: 959px) {
	.menu {
		list-style: none;
		position: absolute;
		width: 100%;
		height: auto;
		top: 0;
		margin-top: 0;
		padding: 40px 24px 120px;
		display: block;
		height: auto;
	}

	.menu li {
		margin: 0;
		padding: 0;
		line-height: 1 !important;
	}

	.navcinzel_big {
		font-size: 24px !important;
		line-height: 1.2;
	}

	.spcontents .gnavi li a {
		/*線の基点とするためrelativeを指定*/
		position: relative;
		padding-bottom: 8px;
		font-size: 14px;
		line-height: 24px;
		line-height: 1.4 !important;
	}

	span.en_cinzel {
		padding-right: 8px;
		font-size: 16px;
	}

	.navtext img {
		width: 120px;
		margin-top: 8px;
	}

	.navtext {
		left: 20px;
		top: 16px;
	}

	.mailicon {
		position: absolute;
		right: 88px;
		top: 28px;
	}

	.menu-icon {
		padding: 32px 17px;
		right: 20px;
		top: 16px;
	}
}


/*---------------------------------------------------------
title
---------------------------------------------------------*/

h2.inpagetitle {
	font-family: 'Cinzel', serif;
	font-weight: normal;
	font-size: 88px;
	letter-spacing: 0.04em;
	line-height: 85px;
	text-align: left;
	color: #040c1d;
}

h2.inpagetitle span {
	font-family: "Noto Serif JP";
	font-weight: 500;
	font-size: 19px;
	letter-spacing: 0.04em;
	line-height: 33px;
	text-align: left;
	color: #00030b;
}

@media screen and (max-width: 959px) {
	h2.inpagetitle {
		font-size: 40px;
		line-height: 48px;
	}

	h2.inpagetitle span {
		font-size: 14px;
		line-height: 20px;
	}
}


/*---------------------------------------------------------
top_common
---------------------------------------------------------*/


/*---------------------------------------------------------
fv
---------------------------------------------------------*/

.bgimg {
	position: relative;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transition-timing-function: ease-in;
	transition-timing-function: ease-in;
	/*アニメーションがゆっくり開始される*/
}

.light {
	background: rgba(255, 255, 255, 0.5);
}

.bgimg::before {
	background: url(../img/bgmain@2x.jpg) no-repeat center;
	/* 画像（ここにfixedは入れない） */
	background-size: cover;
	/* cover指定できる */
	content: "";
	display: block;
	position: fixed;
	/* 擬似要素ごと固定 */
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	/* 横幅いっぱい */
	height: 100vh;
	/* 縦幅いっぱい */
}

@media screen and (max-width: 768px) {
	.bgimg::before {
		background: url(../img/bgmain_sp@2x.jpg) no-repeat center;
		background-size: cover;
	}
}


/*

.fv {
    background-image: url(../img/bgmain@2x.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
*/

.fv_main {
	height: 100vh;
	position: relative;
	width: 100%;
}

.fv_main h1 {
	position: absolute;
	bottom: 80px;
	left: 40px;
	width: 70%;
	line-height: 1;
}

h1.fvtitle {
	overflow: hidden;
}

h1.fvtitle span {
	display: block;
	transition: transform 1s;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	transform: translate3d(0, 100%, 0);
}

h1.fvtitle span.fadeUp {
	transform: translate3d(0, 0, 0);
}

.scrollbox {
	background-image: url(../img/Arrow.svg);
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	width: 142px;
	height: 142px;
	bottom: 80px;
	right: 40px;
}

span.scrool {
	display: inline-block;
	width: 142px;
	height: 142px;
}

#box1 {
	animation: 20s linear infinite rotation1;
}

.maintitle01 {
	max-width: 720px;
	width: 100%;
}

.maintitle02 {
	padding-left: 80px;
	max-width: 850px;
	width: 100%;
}

@keyframes rotation1 {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}

.readbox {
	display: flex;
	padding: 120px 120px 360px;
}

.readLeft {
	width: 50%;
}

.readLeft p {
	font-family: 'Cinzel', serif !important;
	font-weight: normal;
	font-size: 77px;
	letter-spacing: 0.04em;
	line-height: 90px;
	text-align: left;
	color: #040C1D;
}

.readLeft .enTx {
	font-size: 16px;
}

.fadeup {
	overflow: hidden;
}

.fadeup span {
	display: block;
	transition: transform 1s;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	transform: translate3d(0, 100%, 0);
}

.fadeup span.scroll-in {
	transform: translate3d(0, 0, 0);
}

.readRight {
	width: 50%;
}

.readRight h2 {
	font-family: "Noto Serif JP";
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.04em;
	line-height: 45px;
	text-align: left;
	color: #040C1D;
}

.readRight p {
	font-family: "Noto Sans JP";
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.04em;
	line-height: 24px;
	text-align: left;
	color: #040C1D;
	margin-top: 40px;
	max-width: 520px;
}

.readRight .name {
	text-align: right;
	max-width: 520px;
}

.readRight .name img {
	width: 160px;
}

@media screen and (max-width: 959px) {

	/*
    .fv {
        background-image: url(../img/bgmain@2x.jpg);
    }
    */
	.fv_main {
		height: 100vh;
		position: relative;
		width: 100%;
	}

	.fv_main h1 {
		position: absolute;
		bottom: 180px;
		left: 24px;
		width: 100%;
	}

	.scrollbox {
		width: 96px;
		height: 96px;
		bottom: 40px;
		right: 24px;
	}

	span.scrool {
		width: 96px;
		height: 96px;
	}

	.maintitle01 {
		max-width: inherit;
		width: 76%;
	}

	.maintitle02 {
		padding-left: 40px;
		max-width: inherit;
		width: 90%;
	}

	@keyframes rotation1 {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.readbox {
		display: block;
		padding: 120px 20px;
	}

	.readLeft {
		width: 100%;
	}

	.readLeft p {
		font-size: 34px;
		line-height: 40px;
	}

	.readRight {
		width: 100%;
	}

	.readRight h2 {
		font-size: 16px;
		line-height: 28px;
		margin-top: 24px;
	}

	.readRight p {
		font-size: 13px;
		line-height: 24px;
		margin-top: 40px;
	}
}


/*---------------------------------------------------------
anniversary
---------------------------------------------------------*/


/*
右から左へ
----------------------------*/

@keyframes infinity-scroll-left {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}


/*
IE11対策
----------------------------*/

_:-ms-lang(x)::-ms-backdrop,
.d-demo {
	display: -ms-grid;
	overflow: hidden;
}


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

.d-demo__wrap {
	display: flex;
	overflow: hidden;
	margin-top: -210px;
	position: relative;
	z-index: 1;
}

.d-demo__list {
	display: flex;
	list-style: none;
}

.d-demo__list--left {
	animation: infinity-scroll-left 95s infinite linear 0.5s both;
}

.d-demo__item {
	width: calc(180vw / 1);
	margin-right: 16px;
}

.d-demo__item>img {
	width: 100%;
}

@media screen and (max-width: 959px) {
	.d-demo__wrap {
		margin-top: -96px;
	}

	.d-demo__item {
		width: calc(320vw / 1);
		margin-right: 16px;
	}
}


/*---------------------------------------------------------
specialcontents
---------------------------------------------------------*/

.specialcontents {
	padding: 120px 120px;
	margin-top: -6%;
	background: linear-gradient(#0e1524 0%, #2e3a52 100%);
	position: relative;
}

.forty {
	position: absolute;
	top: 240px;
	right: -120px;
	width: 960px;
	z-index: 0;
}

.specialcontents .titlebox {
	display: flex;
	align-items: center;
	margin-top: 120px;
	z-index: 1;
	position: relative;
}

.specialcontents .titlebox h2 {
	font-family: 'Cinzel', serif;
	font-weight: normal;
	font-size: 80px;
	letter-spacing: 0.04em;
	line-height: 92px;
	text-align: left;
	color: #e9eadd;
}

.specialcontents .titlebox p {
	font-family: "Noto Serif JP";
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.24em;
	line-height: 18px;
	text-align: left;
	color: #212d48;
	background-color: #E9EADD;
	padding: 4px 8px;
	display: inline-block;
	margin-left: 80px;
}

.specialcontents p.tx {
	color: #E9EADD;
	padding-left: 44%;
	margin-top: 40px;
	position: relative;
	z-index: 9;
}

@media screen and (max-width: 959px) {
	.specialcontents {
		padding: 80px 20px;
		margin-top: -10%;
	}

	.forty {
		position: absolute;
		top: 160px;
		right: -80px;
		width: 400px;
		z-index: 0;
	}

	.specialcontents .titlebox {
		display: block;
		margin-top: 40px;
	}

	.specialcontents .titlebox h2 {
		font-size: 40px;
		line-height: 48px;
	}

	.specialcontents .titlebox p {
		font-size: 13px;
		line-height: 16px;
		padding: 4px 8px;
		margin-left: 0;
		margin-top: 4px;
	}

	.specialcontents p.tx {
		padding-left: 0;
		margin-top: 8px;
		font-size: 12px;
	}
}


/*---------------------------------------------------------
contentsimg
---------------------------------------------------------*/

.contentsmax {
	max-width: 1100px;
	margin: 0 auto;
}

.contentsimg {
	position: relative;
	z-index: 1;
	margin-top: 120px;
	padding-right: 8%;
}

.contentsnumber {
	position: absolute;
	top: -64px;
	left: -64px;
	width: 130px;
	z-index: 2;
}

.contentsimgR {
	padding-left: 8%;
	padding-right: 0 !important;
}

.padnon {
	padding-right: 0 !important;
}

.scaleimg {
	cursor: pointer;
	overflow: hidden;
	width: 100%;
}

.scaleimg img {
	height: auto;
	transition: transform .6s ease;
	/* ゆっくり変化させる */
}

.scaleimg:hover img {
	transform: scale(1.1);
	/* 拡大 */
}

.scaleimgno:hover img {
	transform: scale(1) !important;
	/* 拡大 */
}

.lasttext {
	font-family: 'Cinzel', serif;
	font-weight: 500;
	font-size: 40px;
	letter-spacing: 0.24em;
	line-height: 40px;
	text-align: center;
	color: #e9eadd;
	margin-top: 80px;
}

@media screen and (max-width: 959px) {
	.contentsmax {
		max-width: inherit;
		width: 88%;
		margin: 0 auto;
	}

	.contentsimg {
		margin-top: 64px;
		padding-right: 8%;
	}

	.scaleimg:hover img {
		transform: scale(1) !important;
		/* 拡大 */
	}

	.contentsnumber {
		position: absolute;
		top: -32px;
		left: -32px;
		width: 64px;
		z-index: 2;
	}

	.lasttext {
		font-size: 16px;
		line-height: 24px;
		margin-top: 64px;
	}
}


/*---------------------------------------------------------
btn
---------------------------------------------------------*/


/*== ボタン共通設定 */

.btn {
	/*アニメーションの起点とするためrelativeを指定*/
	position: relative;
	overflow: hidden;
	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	border: 1px solid #E9EADD;
	/* ボーダーの色と太さ */
	padding: 80px 0;
	text-align: center;
	outline: none;
	/*アニメーションの指定*/
	transition: ease .2s;
	width: 960px;
	font-family: 'Cinzel', serif !important;
	font-weight: normal;
	font-size: 48px;
	letter-spacing: 0.04em;
	line-height: 66px;
	color: #e9eadd;
	margin: 0 auto;
}


/*ボタン内spanの形状*/

.btn span {
	position: relative;
	z-index: 3;
	/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color: #E9EADD;
}

.btn:hover {
	opacity: 1 !important;
}

.btn:hover span {
	color: #1C2435;
}


/*== 背景が流れる（左から右） */

.bgleft:before {
	content: '';
	/*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	/*色や形状*/
	background: #E9EADD;
	/*背景色*/
	width: 100%;
	height: 100%;
	/*アニメーション*/
	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: scale(0, 1);
	transform-origin: right top;
}


/*hoverした際の形状*/

.bgleft:hover:before {
	transform-origin: left top;
	transform: scale(1, 1);
}

@media screen and (max-width: 959px) {

	/*== ボタン共通設定 */
	.btn {
		padding: 40px 0;
		width: 100%;
		font-size: 24px;
		line-height: 56px;
	}
}


/*---------------------------------------------------------
feature
---------------------------------------------------------*/

.h1area {
	padding: 240px 160px 80px;
}

h1.eng {
	font-family: 'Cinzel', serif;
	font-weight: normal;
	font-size: 96px;
	letter-spacing: 0.04em;
	line-height: 110px;
	text-align: left;
	color: #040c1d;
	position: relative;
	z-index: 1;
}

span.h1small {
	font-family: "Noto Serif JP";
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.16em;
	line-height: 25px;
	text-align: center;
	color: #e9eadd;
	background-color: #040C1D;
	padding: 0 4px;
	position: relative;
	z-index: 1;
}


/*
.border_line {
    padding-bottom: 1px;
    display: inline;
    background: linear-gradient(transparent 99%, #040D1C 0%);
    font-family: "Noto Serif JP";
    font-weight: 500;
    font-size: 40px;
    letter-spacing: 0.24em;
    line-height: 64px;
    text-align: left;
    color: #040c1d;
    position: relative;
    z-index: 1;
}

span.h1small {
    font-family: 'Cinzel', serif;
    font-weight: normal;
    font-size: 20px;
    letter-spacing: 0.04em;
    line-height: 32px;
    text-align: left;
    display: block;
    z-index: 999;
    position: relative;
}
*/

.d-demoh1__wrap {
	display: flex;
	overflow: hidden;
	margin-top: -360px;
	position: absolute;
	z-index: 0;
}

.d-demoh1__list {
	display: flex;
	list-style: none;
}

.d-demoh1__list--left {
	animation: infinity-scroll-left 95s infinite linear 0.5s both;
}

.d-demoh1__item {
	width: calc(180vw / 1);
	margin-right: 16px;
	/*
    font-family: Cinzel;
    font-weight: normal;
    font-size: 400px;
    letter-spacing: 0.04em;
    line-height: 506px;
    text-align: left;
    color: #ddd;
*/
}

.d-demoh1__item>img {
	width: 100%;
}

.inpagemv {
	padding-left: 80px;
	margin-top: 0;
	position: relative;
	z-index: 2;
}

@media screen and (max-width: 959px) {
	.h1area {
		padding: 120px 20px 80px;
	}

	h1.eng {
		font-size: 48px;
		line-height: 56px;
	}

	span.h1small {
		font-size: 13px;
		line-height: 18px;
	}

	/*
    .border_line {
        padding-bottom: 1px;
        display: inline;
        background: linear-gradient(transparent 97%, #040D1C 0%);
        font-size: 22px;
        line-height: 32px;
    }
    */
	.d-demoh1__wrap {
		display: flex;
		overflow: hidden;
		margin-top: -140px;
		position: relative;
		z-index: 0;
	}

	.inpagemv {
		padding-left: 20px;
		margin-top: -16px;
		position: relative;
		z-index: 1;
	}
}


/*---------------------------------------------------------
feature-why
---------------------------------------------------------*/

.why {
	display: flex;
	width: 960px;
	margin: 0 auto;
	padding: 80px 0;
	align-items: center;
	justify-content: space-between;
}

.whyL h2 {
	font-family: 'Cinzel', serif;
	font-weight: normal;
	font-size: 80px;
	letter-spacing: 0.04em;
	line-height: 94px;
	text-align: left;
	color: #040c1d;
}

.whyL .whyimg {
	width: 460px;
	margin-top: 40px;
}

.whyR {
	padding-left: 16px;
}

.whyR h3 {
	font-family: "Noto Serif JP";
	font-weight: 600;
	font-size: 32px;
	letter-spacing: 0.04em;
	line-height: 57px;
	text-align: left;
	color: #040c1d;
}

.whyR p {
	font-family: "Noto Sans JP";
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 24px;
	text-align: left;
	color: #040c1d;
	margin-top: 40px;
	padding-left: 40px;
}

.anc {
	display: flex;
	width: 960px;
	margin: 0 auto;
	z-index: 2;
	position: relative;
}

@media screen and (max-width: 959px) {
	.why {
		display: block;
		width: calc(100% - 40px);
		margin: 0 auto;
		padding: 40px 0;
	}

	.whyL h2 {
		font-size: 48px;
		line-height: 56px;
	}

	.whyL .whyimg {
		width: 100%;
		margin-top: 24px;
	}

	.whyR {
		padding-left: 0;
	}

	.whyR h3 {
		font-size: 20px;
		line-height: 28px;
		margin-top: 24px;
	}

	.whyR p {
		font-size: 14px;
		line-height: 24px;
		margin-top: 24px;
		padding-left: 0;
	}

	.anc {
		display: block;
		width: 100%;
		margin: 0 auto;
		z-index: 1;
		position: relative;
	}
}


/*---------------------------------------------------------
feature-technology
---------------------------------------------------------*/

.technology {
	position: relative;
	background-color: #F0F0F0;
	padding: 180px 0;
	margin-top: -120px;
	z-index: 1;
}

.technologyin {
	margin-top: 80px;
	z-index: 8;
	position: relative;
}

.technology .d-demoh1__wrap {
	margin-top: 0;
	z-index: 0;
}

.textbox {
	margin-left: 120px;
	padding-top: 40px;
}

.border_line_inpage {
	padding-bottom: 1px;
	display: inline;
	background: linear-gradient(transparent 0%, #040C1D 0%);
	font-family: "Noto Serif JP";
	font-weight: 600;
	font-size: 25px;
	letter-spacing: 0.04em;
	line-height: 44px;
	text-align: left;
	color: #e9eadd;
}

.textbox .tx {
	margin-top: 24px;
	margin-left: 120px;
	margin-bottom: 40px;
}

.technologyhover {
	display: flex;
	width: 960px;
	margin: 16px auto 0;
	justify-content: space-between;
}

.technologyhoverimg {
	position: relative;
	margin: 0 auto;
	display: block;
	overflow: hidden;
	cursor: pointer;
}

.technologyhoverimg01 {
	width: 635px;
	height: 320px;
}

.technologyhoverimg02 {
	width: 309px;
	height: 320px;
}

.technologyhoverimg03 {
	width: 309px;
	height: 309px;
}

.technologyhoverimg04 {
	width: 309px;
	height: 309px;
}

.technologyhoverimg05 {
	width: 309px;
	height: 309px;
}

.technologyhoverimg06 {
	width: 960px;
	height: 320px;
}

.technologyhoverimg07 {
	width: 309px;
	height: 320px;
}

.technologyhoverimg08 {
	width: 635px;
	height: 320px;
}

.technologyhoverimg img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}

.technologyhoverimg:hover img:nth-of-type(2) {
	opacity: 0;
}

.modal {
	position: relative;
	z-index: 999;
}

.md-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .7;
	z-index: 9999;
}

.md-contents {
	display: none;
	position: fixed;
	top: 16%;
	left: 50%;
	width: 95%;
	height: auto;
	overflow: hidden;
	transform: translateX(-50%);
	z-index: 10000;
}

.md-inner {
	height: auto;
}

.md-inner p img {
	position: relative;
	z-index: 999;
}

.md-xmark {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 25px;
	height: 22px;
	z-index: 9999;
	cursor: pointer;
}

.md-xmark span {
	height: auto;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #E9EADD;
	border-radius: 4px;
}

.md-xmark span:nth-of-type(1) {
	top: 0;
	transform: translateY(10px) rotate(-45deg);
}

.md-xmark span:nth-of-type(2) {
	bottom: 0;
	transform: translateY(-10px) rotate(45deg);
}

@media screen and (max-width: 959px) {
	.technology {
		padding: 80px 0;
		margin-top: 0;
	}

	.technologyin {
		margin: -80px auto 0;
		z-index: 8;
		position: relative;
		width: calc(100% - 40px);
	}

	.technology .d-demoh1__wrap {
		margin-top: 0;
		z-index: 0;
	}

	.textbox {
		margin-left: 0;
		padding-top: 16px;
	}

	.border_line_inpage {
		font-size: 16px;
		line-height: 24px;
	}

	.textbox .tx {
		margin-top: 16px;
		margin-left: 0;
		margin-bottom: 40px;
	}

	.technologyhover {
		display: flex;
		width: 100%;
		margin: 16px auto 0;
		justify-content: space-between;
	}

	.technologyhoverimg {
		position: relative;
		margin: 0 auto;
		display: block;
		overflow: hidden;
		cursor: pointer;
	}

	.technologyhover_sp {
		display: flex;
		justify-content: space-between;
		margin-top: 8px;
	}

	.technologyhover_sp li.img_technology01_sp {
		width: 66%;
	}

	.technologyhover_sp li.img_technology02_sp {
		width: 32%;
	}

	.technologyhover_sp li.img_technology03_sp {
		width: 32%;
	}

	.technologyhover_sp li.img_technology04_sp {
		width: 32%;
	}

	.technologyhover_sp li.img_technology05_sp {
		width: 32%;
	}

	.technologyhover_sp li.img_technology06_sp {
		width: 32%;
	}

	.technologyhover_sp li.img_technology07_sp {
		width: 66%;
	}

	.technologyhoverimg img {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 100%;
		display: block;
		-webkit-transition: .4s ease-in-out;
		transition: .4s ease-in-out;
	}

	.technologyhoverimg:hover img:nth-of-type(2) {
		opacity: 0;
	}
}


/*---------------------------------------------------------
feature-desgin
---------------------------------------------------------*/

.design {
	padding: 120px 0;
}

.designin {
	margin-top: 0;
	z-index: 8;
	position: relative;
}

.design .d-demoh1__wrap {
	margin-top: 0;
	z-index: 0;
}

.design .d-demoh1__item {
	width: calc(100vw / 1);
}

.designin .design_img h3 {
	font-family: 'Cinzel', serif;
	font-weight: normal;
	font-size: 72px;
	letter-spacing: 0.04em;
	line-height: 70px;
	text-align: center;
	color: #040c1d;
	position: relative;
	z-index: 1;
}

.designin .design_img h3 span {
	font-family: "Noto Serif JP";
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 0.04em;
	line-height: 32px;
	text-align: center;
	color: #00030b;
}

.design_img {
	margin-top: 40px;
}

.design_img img {
	margin-top: -24px;
	position: relative;
	z-index: 0;
}

@media screen and (max-width: 959px) {
	.design {
		padding: 80px 0;
	}

	.designin {
		margin-top: -80px;
		z-index: 0;
		position: relative;
	}

	.design .d-demoh1__wrap {
		margin-top: 0;
		z-index: 0;
	}

	.designin .design_img h3 {
		font-size: 40px;
		line-height: 40px;
	}

	.designin .design_img h3 span {
		font-size: 13px;
		line-height: 20px;
	}

	.design_img {
		margin-top: 24px;
	}

	.design_img img {
		margin-top: -16px;
		position: relative;
		z-index: 0;
	}
}


/*---------------------------------------------------------
history
---------------------------------------------------------*/

.history {
	background-image: url(../img/tx_1946.svg), url(../img/tx_1980.svg), url(../img/tx_1990.svg), url(../img/tx_2000.svg), url(../img/tx_2010.svg), url(../img/tx_2020.svg);
	background-position: 80% 160px, 80% 2500px, 80% 4900px, 80% 5900px, 80% 7600px, 80% 9000px;
	background-repeat: no-repeat;
}

.historyanc_border {
	border-top: 1px solid #050F1A;
	border-bottom: 1px solid #050F1A;
	padding: 2px 0;
	width: 560px;
	margin: 80px auto 0;
}

.historyanc {
	border-top: 1px solid #050F1A;
	border-bottom: 1px solid #050F1A;
	padding: 24px 40px;
	display: flex;
	justify-content: center;
}

.historyanc li {
	padding: 0 12px;
}

.historyanc li a {
	font-family: "Noto Serif JP";
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 0.04em;
	line-height: 32px;
	text-align: left;
	color: #00030b;
}

.historyanc li a:hover {
	text-decoration: underline;
}

dl.historyLine {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 960px;
	margin: 80px auto 0;
}

dl dt {
	width: 18rem;
	position: relative;
	font-family: 'Cinzel', serif;
	font-weight: normal;
	text-align: left;
	color: #040c1d;
	font-size: 56px;
	line-height: 0;
	border-right: 2px dashed #707070;
}

dl dt.last {
	border-right: 0;
}

.double-line {
	display: inline;
	background-image: linear-gradient(0deg, #050F1A 0px, #050F1A 2px,
			/* 1本目の線 */
			transparent 2px, transparent 4px,
			/* 1本目と2本目の間隔 */
			#050F1A 4px, #050F1A 6px
			/* 2本目の線 */
		);
	background-size: 100% 6px;
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-bottom: 5px;
	/* 線の位置を調整 */
}

dl dt::after {
	content: url(../img/maru.svg);
	position: absolute;
	right: -2.8em;
	top: -10px;
	font-size: 12px;
	color: #040C1D;
}

dl dd {
	width: calc(100% - 12.5em);
	padding: 0 2.0em 80px;
	margin-top: -20px;
}

dl dd p.tx {
	margin-top: 24px;
}

dl dd p.img {
	margin-top: 24px;
}

@media only screen and (max-width: 959px) {
	.history {
		background-image: none;
		background-position: 80% 160px;
		background-repeat: no-repeat;
		width: calc(100% - 40px);
		margin: 0 auto;
	}

	.historyanc_border {
		width: 100%;
		margin: 40px auto 0;
	}

	.historyanc {
		padding: 8px;
		display: flex;
	}

	.historyanc li {
		padding: 0 5px;
	}

	.historyanc li a {
		font-size: 14px;
		line-height: 20px;
	}

	dl.historyLine {
		display: flex;
		width: 100%;
		margin: 64px auto 0;
	}

	dl dt {
		width: 66px;
		font-size: 20px;
		line-height: 0;
		border-right: 2px dashed #707070;
	}

	.double-line {
		display: inline;
		background-image: linear-gradient(0deg, #050F1A 0px, #050F1A 2px,
				/* 1本目の線 */
				transparent 2px, transparent 4px,
				/* 1本目と2本目の間隔 */
				#050F1A 4px, #050F1A 6px
				/* 2本目の線 */
			);
		padding-bottom: 2px;
		/* 線の位置を調整 */
	}

	dl dt::after {
		content: url(../img/maru_sp.svg);
		right: -1.3em;
		top: -6px;
	}

	dl dd {
		width: calc(100% - 7em);
		padding: 0 0 80px 16px;
		margin-top: -12px;
	}

	dl dd p.tx {
		margin-top: 8px;
	}

	dl dd p.img {
		margin-top: 8px;
	}

	dl dd.last {
		padding-bottom: 40px;
	}
}


/*---------------------------------------------------------
flootbanner
---------------------------------------------------------*/

.floatbnr {
	display: none;
	z-index: 8888;
	position: relative;
}

.banner img {
	width: 100%;
}

.cmn_floatBnr {
	position: fixed;
	z-index: 99999;
	bottom: 0;
	right: 0;
	width: 330px;
	font-size: 0;
	letter-spacing: 0;
	transition: all 0.2s ease 0s;
}

.cmn_floatBnr p {
	display: inline-block;
	vertical-align: top;
}

.cmn_floatBnr.off {
	right: -300px;
}

.cmn_floatBnr .cmn_floatBnr_arw {
	transition: all 0.2s ease 0s;
}

.cmn_floatBnr.off .cmn_floatBnr_arw {
	transform: rotate(180deg);
}

.cmn_floatBnrSp {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 99999999;
}

.cmn_floatBnrSp a {
	display: block;
	color: #fff;
	font-size: 1.3rem;
	text-align: center;
	background: #bc2c2a;
	padding: 10px 5px;
}


/*---------------------------------------------------------
footer
---------------------------------------------------------*/

footer {
	background: #1C2435;
	padding: 120px 0;
	text-align: center;
}

.footernav {
	display: flex;
	padding-bottom: 120px;
}

.footernav .footernavL {
	width: 50%;
}

.footernav .footernavL h2 {
	font-family: 'Cinzel', serif;
	font-weight: normal;
	font-size: 72px;
	letter-spacing: 0.04em;
	line-height: 85px;
	text-align: left;
	color: #e9eadd;
}

.footernav .footernavR {
	text-align: left;
	width: 50%;
}

.footernav .footernavR p {
	font-family: 'Cinzel', serif;
	font-weight: normal;
	font-size: 24px;
	letter-spacing: 0.04em;
	line-height: 28px;
	text-align: left;
	color: #e9eadd;
	margin-bottom: 16px;
}

p.address {
	text-align: center;
	margin-top: 120px;
	font-family: 'Cinzel', serif !important;
	font-weight: normal;
	font-size: 12px;
	letter-spacing: 0.04em;
	line-height: 14px;
	color: #e9eadd;
}

@media screen and (max-width: 959px) {
	footer {
		padding: 80px 20px;
	}

	p.address {
		margin-top: 80px;
	}

	.footernav {
		display: block;
		padding-bottom: 80px;
	}

	.footernav .footernavL {
		width: 100%;
	}

	.footernav .footernavL h2 {
		font-size: 40px;
		line-height: 48px;
	}

	.footernav .footernavR {
		text-align: left;
		width: 100%;
		margin-top: 40px;
	}

	.footernav .footernavR p {
		font-size: 24px;
		letter-spacing: 0.04em;
		line-height: 28px;
	}

	footer .inner1120 {
		width: 100% !important;
	}
}


/*---------------------------------------------------------
base
---------------------------------------------------------*/

p.mt {
	margin-top: 80px;
}

p.line {
	position: relative;
	padding: 1rem 2rem;
	border-bottom: 1px solid #E0DFDF;
	max-width: 1120px;
	margin: 120px auto;
	width: 100%;
}

p.line:before {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 16px;
	height: 1px;
	content: '';
	background: #10A5CC;
}

.inner1360 {
	max-width: 1360px;
	margin: 0 auto;
}

.inner1120 {
	max-width: 1120px;
	margin: 0 auto;
}

.inner960 {
	max-width: 960px;
	margin: 0 auto;
}

.pankuzu {
	padding: 16px 0;
	position: absolute;
	width: 100%;
	top: 88px;
}

.pankuzu ul {
	display: flex;
}

.pankuzu ul li {
	margin-right: 8px;
	font-weight: normal;
	color: #fff;
}

.pankuzu ul li a {
	color: #fff;
	font-weight: normal;
}

@media only screen and (max-width: 959px) {
	p.mt {
		margin-top: 64px;
	}

	p.line {
		max-width: inherit;
		margin: 80px auto;
		width: calc(100% - 40px);
	}

	.inner1360 {
		max-width: inherit;
		width: 100%;
		margin: 0 auto;
	}

	.inner1120 {
		max-width: inherit;
		width: calc(100% - 40px);
		margin: 0 auto;
	}

	.inner960 {
		max-width: inherit;
		width: 100%;
		margin: 0 auto;
	}

	span.circle {
		font-size: 16px;
		margin-right: 8px;
		padding: 7px;
	}

	.pankuzu {
		top: 72px;
	}
}


/*---------------------------------------------------------
fadein
---------------------------------------------------------*/


/* 画面外にいる状態 */

.fadein {
	opacity: 0.1;
	transform: translate(0, 24px);
	transition: all 500ms;
}


/* 画面内に入った状態 */

.fadein.scrollin {
	opacity: 1;
	transform: translate(0, 0);
}

@media only screen and (max-width: 959px) {}


/*---------------------------------------------------------
Pagination
---------------------------------------------------------*/

.Pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 40px;
}

.Pagination-Item-Link {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	overflow: hidden;
	background: #fff;
	font-size: 14px;
	color: #111;
	font-weight: bold;
	transition: all 0.15s linear;
}

.Pagination-Item-Link img {
	width: 24px;
}

.Pagination-Item-Link.isActive {
	background: #0072C6;
	color: #fff;
	pointer-events: none;
}

.Pagination-Item-Link:not(.isActive):hover {
	background: #0072C6;
	color: #fff;
}

.Pagination>*+* {
	margin-left: 8px;
}


/*---------------------------------------------------------
yamaguchi
---------------------------------------------------------*/

.yamaguchi_index_fv {
	background-image: url(../img/yamaguchi_mv@2x.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 580px;
	position: relative;
}

.yamaguchi_fv_title {
	display: flex;
	width: 870px;
	justify-content: space-between;
	top: 64px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	z-index: 998;
	position: absolute;
	align-items: end;
}

.fv_title img {
	margin-top: 32px;
	width: 280px;
}

.yamaguchi_fv_title p.read {
	font-family: "Noto Serif JP";
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 32px;
	text-align: left;
	color: #00030b;
	margin-top: 32px;
}

.article_index img.40th {
	width: 370px;
}

.article_index p.read {
	font-family: "Noto Serif JP";
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 32px;
	text-align: center;
	color: #00030b;
	padding: 0 0 40px;
}

.yamaguchi_40logo img {
	width: 420px;
}

.yamaguchi_header {
	position: fixed;
	display: flex;
	width: 100%;
	padding: 16px 4%;
	justify-content: space-between;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	z-index: 999;
	transition: all 0.5s ease-out;
}

.yamaguchiLogo {
	width: 128px;
}

.sweden40Logo {
	width: 158px;
}

.premium_logo {
	width: 202px;
}

.article_index {
	padding: 40px 0 80px;
}

.article_list {
	display: flex;
	background: #fff;
	max-width: 1040px;
	margin: 0 auto;
	border-radius: 16px;
	margin-top: 40px;
}

.article_list_reverse {
	flex-direction: row-reverse;
}

h2.yamaguchi_index {
	font-family: "Noto Serif JP";
	font-weight: 500;
	font-size: 32px;
	letter-spacing: 0.2em;
	line-height: 56px;
	text-align: center;
	color: #00030b;
	position: relative;
	padding-top: 16px;
}

h2.yamaguchi_index::before {
	content: "";
	position: absolute;
	width: 16px;
	height: 4px;
	background: #223D69;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

.article_list .article_list_img {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 50%;
	border-radius: 16px 0 0 16px;
}

.article_list .article_list_img01 {
	background-image: url(../img/img_article01@2x.jpg);
	border-radius: 16px 0 0 16px;
}

.article_list .article_list_img02 {
	background-image: url(../img/img_article02@2x.jpg);
	border-radius: 0 16px 16px 0;
}

.article_list .article_list_img03 {
	background-image: url(../img/img_article03@2x.jpg);
	border-radius: 16px 0 0 16px;
}

.article_list .article_list_img04 {
	background-image: url(../img/img_article04@2x.jpg);
	border-radius: 0 16px 16px 0;
}

.article_list .article_list_img05 {
	background-image: url(../img/img_article05@2x.jpg);
	border-radius: 16px 0 0 16px;
}

.model_int02_01 {
	background-image: url(../img/yamaguchi02/model_int02_01@2x.jpg) !important;
}

.model_int02_02 {
	background-image: url(../img/yamaguchi02/model_int02_02@2x.jpg) !important;
}

.model_int03_01 {
	background-image: url(../img/yamaguchi03/model_int03_01@2x.jpg) !important;
}

.model_int03_02 {
	background-image: url(../img/yamaguchi03/model_int03_02@2x.jpg) !important;
}

.model_int04_01 {
	background-image: url(../img/yamaguchi04/model_int04_01@2x.jpg) !important;
}

.model_hus_01 {
	background-image: url(../img/gd/model_hus_01@2x.jpg) !important;
}

.model_hus_02 {
	background-image: url(../img/gd/model_hus_02@2x.jpg) !important;
}

.graytx {
	color: #7C7C7C;
	font-size: 14px;
	padding: 8px 0;
}

.youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.youtube iframe {
	width: 100%;
	height: 100%;
}

.md-contentsyoutube {
	width: 60%;
	padding: 48px !important;
}

@media only screen and (max-width: 959px) {
	#yamaguchi_header.is-show {
		background: #fff;
		transition: all 0.5s ease-out;
	}

	.md-contentsyoutube {
		width: 100%;
		padding: 40px !important;
	}

	.yamaguchi_header {
		padding: 12px 4%;
	}

	.yamaguchiLogo {
		width: 90px;
	}

	.sweden40Logo {
		width: 120px;
	}

	.premium_logo {
		width: 168px;
	}
}

.article_list_info {
	padding: 80px 40px 80px 40px;
	width: 50%;
}

.article_list_info .yamaguchi_index {
	font-family: "Noto Sans JP";
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 0.04em;
	line-height: 40px;
	text-align: left;
	color: #00030b;
	position: relative;
	padding-left: 12px;
}

.article_list_info .yamaguchi_index::before {
	content: "";
	position: absolute;
	width: 3px;
	height: 24px;
	background: #223D69;
	left: 0;
	top: 8px;
}

.article_list_info ul {
	padding: 16px 0;
}

.article_list_info ul li {
	display: flex;
	color: #7C7C7C;
	font-size: 14px;
}

.article_list_info ul li p {
	width: 76%;
}

.article_list_info ul li p.listleft {
	width: 24%;
}

.article_list_info p.btn_interview {
	text-align: left !important;
}

p.btn_interview {
	margin-top: 16px;
}

p.btn_interview {
	text-align: center;
}

p.btn_interview a {
	font-family: "Noto Serif JP";
	font-weight: normal;
	font-size: 16px;
	letter-spacing: 0.04em;
	line-height: 18px;
	text-align: center;
	color: #fff;
	background: #223D69;
	padding: 8px 16px;
	border-radius: 100px;
}

p.btn_interview2 a {
	padding: 16px 40px;
}

p.btn_interview a:hover {
	background: #0B1C38;
}

.h1area_yamaguchi {
	background: #DBDBDB;
	padding: 200px 0 0;
	position: relative;
}

.h1area_yamaguchi h1 {
	font-family: "Noto Serif JP";
	font-weight: 600;
	font-size: 28px;
	letter-spacing: 0.04em;
	line-height: 40px;
	text-align: left;
	color: #00030b;
	width: 800px;
	margin: 16px auto 80px;
	position: relative;
	z-index: 1;
}

.h1area_yamaguchi .sub {
	font-family: "Noto Sans JP";
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.04em;
	line-height: 32px;
	text-align: left;
	color: #00030b;
	position: relative;
	display: block;
	padding-left: 16px;
	width: 800px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.h1area_yamaguchi .sub::before {
	content: "";
	position: absolute;
	width: 3px;
	height: 24px;
	background: #F8C730;
	left: 0;
	top: 4px;
}

.storyimg {
	width: 90%;
	margin: -160px auto 0;
	z-index: 0;
	position: relative;
}

.interview {
	width: 800px;
	margin: 80px auto;
}

.yamaguchi_message {
	display: flex;
	align-items: center;
}

.yamaguchi_img {
	text-align: center;
	padding-right: 24px;
	min-width: 120px;
}

.balloon2-left {
	position: relative;
	display: inline-block;
	margin: 1.5em 0 1.5em 15px;
	padding: 16px;
	min-width: 120px;
	max-width: 100%;
	color: #00030b;
	font-size: 16px;
	background: #FFF;
	box-sizing: border-box;
	border-radius: 16px;
}

.balloon2-left:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -24px;
	margin-top: -12px;
	border: 12px solid transparent;
	border-right: 20px solid #FFF;
	z-index: 2;
}

.balloon2-left:after {
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
	margin-top: -14px;
	border: 14px solid transparent;
	z-index: 1;
}

.balloon2-left p {
	margin: 0;
	padding: 0;
}

h2.title_y {
	font-family: "Noto Serif JP";
	font-weight: 600;
	font-size: 32px;
	letter-spacing: 0.04em;
	line-height: 56px;
	text-align: left;
	color: #00030b;
	margin-top: 40px;
}

h3.title_y {
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 0.04em;
	line-height: 32px;
	text-align: left;
	color: #00030b;
	position: relative;
	padding-left: 40px;
	margin-top: 40px;
}

h3.title_y:before {
	position: absolute;
	top: 48%;
	width: 20px;
	height: 2px;
	background-color: #F8C730;
	content: '';
}

h3.title_y:before {
	left: 0rem;
}

p.gosyujin {
	text-align: left;
	color: #00030b;
	position: relative;
	padding-left: 80px;
}

p.gosyujin:before {
	position: absolute;
	content: 'ご主人：';
	color: #7C7C7C;
}

p.gosyujin:before {
	left: 0rem;
}

p.okusama {
	text-align: left;
	color: #00030b;
	position: relative;
	padding-left: 80px;
}

p.okusama:before {
	position: absolute;
	content: '奥様：';
	color: #7C7C7C;
}

p.okusama:before {
	left: 0rem;
}

p.yamaguchi {
	text-align: left;
	color: #00030b;
	position: relative;
	padding-left: 80px;
}

p.yamaguchi:before {
	position: absolute;
	content: '山口：';
	color: #7C7C7C;
}

p.yamaguchi:before {
	left: 0rem;
}

p.fufu {
	text-align: left;
	color: #00030b;
	position: relative;
	padding-left: 80px;
}

p.fufu:before {
	position: absolute;
	content: 'ご夫婦';
	color: #7C7C7C;
}

p.fufu:before {
	left: 0rem;
}

.inner640 {
	max-width: 640px;
	margin: 0 auto;
}

.smallgray {
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 24px;
	text-align: center;
	color: #7c7c7c;
}

.innertop {
	margin-top: 80px;
}

.innertop40 {
	margin-top: 40px;
}

.innertop .imgbox {
	margin-top: 40px;
}

.innertop .imgbox p {
	margin-top: 8px;
}

.innertop p {
	margin-top: 24px;
}

.owner {
	margin-top: 80px;
	padding-top: 80px;
	border-top: 1px solid #C9C9C9;
}

.owner h4 {
	text-align: center;
	font-family: "Noto Serif JP";
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.04em;
	line-height: 32px;
	text-align: center;
	color: #00030b;
}

.owner ul {
	font-size: 14px;
	margin: 24px auto 40px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.owner ul li {
	width: 48%;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #C9C9C9;
	padding-bottom: 16px;
	margin-top: 24px;
}

.owner ul li .title {
	width: 24%;
}

.owner ul li .pr {
	width: 72%;
}

.owner ul li .pr a {
	color: #000;
}

.article_index_inpage {
	background: #E7E7E7;
	padding: 120px 0;
}

.article_index_inpage_box {
	margin-top: 24px;
}

.article_index_inpage_box {
	padding-top: 24px;
	padding-bottom: 40px;
	position: relative;
	display: flex;
	width: 800px;
	margin: 0 auto;
	align-items: center;
	justify-content: space-between;
}

.article_index_inpage_box span {
	position: absolute;
	left: 0;
	top: 0;
	font-family: 'Cinzel', serif !important;
	font-weight: normal;
	font-size: 48px;
	line-height: 1;
}

.article_index_inpage_box .txbox {
	margin-left: 40px;
	text-align: left;
	width: 88%;
}

.article_index_inpage_box .txbox p.btn_interview {
	text-align: left;
}

.continued {
	font-family: 'Cinzel', serif !important;
	font-weight: normal;
	font-size: 48px;
	letter-spacing: 0.04em;
	line-height: 56px;
	text-align: center;
	color: #223d69;
	margin-top: 80px;
}

.moviethumbnail {
	text-align: center;
	font-size: 16px;
	margin-bottom: 8px;
}

.moviethumbnail img {
	margin-top: 16px;
}

@media only screen and (max-width: 959px) {
	.yamaguchi_index_fv {
		background-image: url(../img/yamaguchi_mv_sp@2x.jpg);
		height: 240px;
	}

	.yamaguchi_fv_title {
		display: flex;
		width: 92%;
		justify-content: space-between;
		bottom: 24px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		z-index: 998;
		position: absolute;
		align-items: end;
	}

	.fv_title img {
		width: 140px;
	}

	.article_index {
		padding: 40px 0 80px;
	}

	.article_index p.read {
		font-size: 12px;
		line-height: 20px;
		margin: 0 auto;
		width: 92%;
	}

	.yamaguchi_40logo img {
		width: 100px;
	}

	.article_list {
		display: block;
		max-width: inherit;
		width: 92%;
		margin: 0 auto;
		border-radius: 16px;
		margin-top: 40px;
	}

	h2.yamaguchi_index {
		font-size: 24px;
		line-height: 40px;
	}

	.article_list .article_list_img {
		width: 100%;
		border-radius: 16px 16px 0 0;
		padding-top: 80%;
	}

	.article_list_info {
		padding: 24px 16px 40px 16px;
		width: 100%;
	}

	.article_list_info .yamaguchi_index {
		font-size: 16px;
		line-height: 24px;
		padding-left: 12px;
	}

	.article_list_info .yamaguchi_index::before {
		width: 3px;
		height: 24px;
		top: 6px;
	}

	.article_list_info ul {
		padding: 16px 0;
	}

	.article_list_info ul li {
		font-size: 12px;
	}

	.article_list_info ul li p.listleft {
		width: 120px;
	}

	.article_list_info p.btn_interview {
		text-align: center !important;
	}

	p.btn_interview {
		text-align: center;
	}

	p.btn_interview {
		margin-top: 24px;
		text-align: center;
	}

	p.btn_interview a {
		font-size: 14px;
		line-height: 18px;
		padding: 8px 16px;
	}

	.h1area_yamaguchi {
		padding: 120px 0 0;
	}

	.h1area_yamaguchi h1 {
		font-size: 20px;
		letter-spacing: 0.04em;
		line-height: 32px;
		width: 92%;
		margin: 16px auto 16px;
	}

	.h1area_yamaguchi .sub {
		font-size: 14px;
		letter-spacing: 0.04em;
		line-height: 32px;
		padding-left: 12px;
		width: 92%;
	}

	.storyimg {
		width: 92%;
		margin: -40px auto 0;
	}

	.balloon2-left {
		font-size: 12px;
	}

	.interview {
		width: 92%;
		margin: 64px auto;
	}

	.yamaguchi_message {
		display: flex;
		align-items: center;
	}

	.yamaguchi_img {
		text-align: center;
		padding-right: 24px;
		min-width: 100px;
	}

	h2.title_y {
		font-size: 22px;
		letter-spacing: 0.04em;
		line-height: 40px;
		margin-top: 40px;
	}

	h3.title_y {
		font-size: 16px;
		letter-spacing: 0.04em;
		line-height: 24px;
		padding-left: 40px;
		margin-top: 32px;
	}

	h3.title_y:before {
		position: absolute;
		top: 48%;
		width: 20px;
		height: 2px;
		background-color: #F8C730;
		content: '';
	}

	h3.title_y:before {
		left: 0rem;
	}

	p.gosyujin {
		padding-left: 56px;
	}

	p.okusama {
		padding-left: 56px;
	}

	p.yamaguchi {
		padding-left: 56px;
	}

	p.fufu {
		padding-left: 56px;
	}

	.inner640 {
		max-width: 100%;
	}

	.smallgray {
		font-size: 12px;
		line-height: 18px;
	}

	.innertop {
		margin-top: 64px;
	}

	.innertop40 {
		margin-top: 40px;
	}

	.innertop .imgbox {
		margin-top: 40px;
	}

	.innertop .imgbox p {
		margin-top: 8px;
	}

	.innertop p {
		margin-top: 24px;
	}

	.owner {
		margin-top: 80px;
		padding-top: 80px;
		border-top: 1px solid #C9C9C9;
	}

	.owner h4 {
		font-size: 16px;
		line-height: 24px;
	}

	.continued {
		font-size: 40px;
		line-height: 48px;
		color: #223d69;
	}

	.article_index_inpage {
		padding: 80px 0;
	}

	.article_index_inpage_box {
		padding-top: 24px;
		display: block;
		width: 92%;
		margin: 0 auto;
	}

	.article_index_inpage_box span {
		position: absolute;
		left: 0;
		top: 0;
		font-family: 'Cinzel', serif !important;
		font-weight: normal;
		font-size: 48px;
		line-height: 1;
	}

	.article_index_inpage_box .txbox {
		margin-left: 0;
		width: 100%;
		margin-top: 8px;
	}

	.article_index_inpage_box .txbox p.btn_interview {
		text-align: center;
	}
}

.cmn_floatBnr p .hs-cta-img {
	width: 300px;
	height: 300px;
}


/*---------------------------------------------------------
hus
---------------------------------------------------------*/

h2.hus {
	font-family: "Noto Serif JP";
	font-weight: 600;
	font-size: 40px;
	letter-spacing: 0.16em;
	line-height: 56px;
	text-align: center;
	color: #5e4e35;
}

.read_tx {
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 40px;
	text-align: center;
	color: #040c1d;
	margin-top: 40px;
}


/*---------------------------------------------------------
gold
---------------------------------------------------------*/

.gdbody {
	background-color: #CBCBCB;
	background-image: none;
}

.gd_mv {
	background-image: url(../img/gd/bg_gdmv@2x.jpg);
	background-position: center;
	background-size: cover;
	position: relative;
	min-height: 640px;
}

.gd_mv h1 {
	font-family: "Noto Serif JP";
	font-weight: 500;
	font-size: 36px;
	letter-spacing: 0.04em;
	line-height: 51px;
	text-align: left;
	color: #fff;
	position: absolute;
	bottom: 40px;
	left: 120px;
}

.gd_mv h1 small {
	font-family: 'Cinzel', serif;
	font-weight: normal;
	font-size: 20px;
	letter-spacing: 0.08em;
	line-height: 28px;
	text-align: left;
	color: #fff;
	margin-bottom: 24px;
}

.ownerbox {
	display: flex;
	width: 800px;
	margin: 80px auto 0;
}

.ownerbox img {
	background-image: url(../img/gd/img_owner@2x.jpg);
	background-size: cover;
	position: relative;
	width: 320px;
}

.ownerbox .txbox {
	background-color: #B2B2B2;
	padding: 40px;
	width: 480px;
}

.ownerbox .txbox .title {
	font-family: 'Cinzel', serif;
	font-weight: normal;
	font-size: 24px;
	letter-spacing: 0.12em;
	line-height: 20px;
	text-align: left;
	color: #453113;
}

.ownerbox .txbox table {
	margin-top: 12px;
	width: 100%;
}

.ownerbox .txbox table tr {
	border-bottom: 1px solid #A0A0A1;
	padding-bottom: 16px;
	padding: 8px 0;
	display: block;
}

.ownerbox .txbox table th {
	width: 108px;
	text-align: left;
}

.gdread .d-demo__wrap {
	margin-top: -400px;
}

.gdread .d-demo__item {
	width: calc(300vw / 1);
}

.gdread {
	background-color: #2E1E1E;
	padding: 80px 0 160px;

}

.gdread h2 {
	font-family: 'Noto Serif JP', serif;
	font-weight: 600;
	font-size: 40px;
	letter-spacing: 0.16em;
	line-height: 56px;
	text-align: center;
	color: #e5ccaf;
}

.gdread p {
	color: #fff;
}

.gdread .premiumMovie {
	max-width: 800px;
	width: 100%;
	margin: 300px auto 0;
}

.interview_gd h2 {
	color: #453113;
}

.interview_gd h3 {
	font-family: 'Noto Serif JP', serif;
	font-weight: bold;
	font-size: 20px;
	letter-spacing: 0.04em;
	line-height: 32px;
	text-align: left;
	color: #453113;
}

h3.title_y:before {
	background-color: #453113;
}


.gdindex {
	background-color: #0F0101;
	padding: 80px 0;
}

.gdindex h2 {
	color: #fff;
}

.gdindex h2.yamaguchi_index::before {
	background: #B4844B;
}

.gdindex .article_list_info .yamaguchi_index::before {
	background: #B4844B;
}

.gdindex p.btn_interview a {
	background: #B4844B;
}

@media only screen and (max-width: 959px) {


	.gd_mv {
		background-image: url(../img/gd/bg_gdmv@2x.jpg);
		background-position: center;
		background-size: cover;
		position: relative;
		min-height: 400px;
	}

	.gdread .d-demo__item {
		width: calc(800vw / 1);
	}

	.gdread .d-demo__wrap {
		margin-top: -300px;
	}

	.gd_mv h1 {
		font-size: 20px;
		line-height: 28px;
		bottom: 24px;
		left: 4%;
	}

	.gd_mv h1 small {
		font-size: 11px;
		line-height: 16px;
		margin-bottom: 8px;
	}

	.gdread {
		padding: 64px 4% 80px;
	}

	.gdread p {
		font-size: 12px;
		line-height: 24px;
	}

	.gdread .premiumMovie {
		max-width: inherit;
		width: 100%;
		margin: 240px auto 0;
	}


	.ownerbox {
		display: block;
		width: 240px;
		margin: 64px auto 0;
	}

	.ownerbox img {
		width: 240px;
	}

	.ownerbox .txbox {
		background-color: #B2B2B2;
		padding: 24px 16px;
		width: 100%;
	}

	.ownerbox .txbox .title {
		font-size: 20px;
		line-height: 20px;
		text-align: center;
	}

	.ownerbox .txbox table tr {
		padding-bottom: 8px;
		padding: 4px 0;
	}

	.ownerbox .txbox table th {
		width: 80px;
		font-size: 11px;
	}

	.ownerbox .txbox table td {
		font-size: 11px;
	}

	.gdread h2 {
		font-size: 24px;
		line-height: 32px;
	}

	.interview_gd h3 {
		font-size: 16px;
		letter-spacing: 0.04em;
		line-height: 24px;
		padding-left: 40px;
		margin-top: 32px;
	}

	h3.title_y:before {
		background-color: #453113;
	}

}