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

*{
	margin:0;padding:0;
	font-feature-settings: "palt";
	box-sizing: border-box;
	
}
html{
	background-color: white;
}


body{
    background-image: url("../img/back_tokaiyosen.jpg");
	background-size:cover;
	background-color: #ff4200;
	scroll-margin-top: 0!important;
}
.dechauheader {
	width: 100%;
	background: #ff4200;
}
.dechauheader img {
	display: block;
	margin: 0 auto;
	width: 80%;
	max-width: 400px;
}
.dechauheader a {
	display: block;
	padding: 10px;
}
.dechauheaderContentsWrapper {
	background: #4d4d4d;
}
.dechauheaderContents {
	margin: 0 auto;
	width: 90%;
	max-width: 600px;
	display: flex;
	justify-content: space-between;
}
.dechauheaderContents a {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size: 0.9em;
	line-height: normal;
	display: block;
	padding: 0.5em;
	color: white;
}
.body1 {
	width: calc(100% - 2em);
	max-width: 900px; /** デザインの最大幅 **/
	margin: 0 auto;
	/*font-family: 'M PLUS 1p', sans-serif;*/
	font-family: "Helvetica Neue",Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}
img {border:0;}
address {font-style:normal;}
a{text-decoration:none;}

.m0auto{margin: 0 auto;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px!important;}
.mb30{margin-bottom: 30px!important;}
.mb50{margin-bottom: 50px!important;}
.mt10{margin-top: 10px!important;}
.mt15{margin-top: 15px!important;}
.mt30{margin-top: 30px!important;}
.mt50{margin-top: 50px!important;}

.mb1em{margin-bottom: 1em!important;}
.mb2em{margin-bottom: 2em!important;}
.mb3em{margin-bottom: 3em!important;}
.mt1em{margin-top: 1em!important;}
.mt2em{margin-top: 2em!important;}
.mt3em{margin-top: 3em!important;}


.red {color: red;}
.yelllow {color: yellow;}
.white{color:white;}
.blue{color:blue;}
.green{color:green;}
.DechauOrange{color:#FF4200;}

.clear {clear:both;}
.copyright {
	font-size: 0.5em;
	margin-top: 20px;
	text-align: center;
	color: white;
}
.embeddedWrap{
	display: flex;
	justify-content: center;
	background: white;
	border: 1px solid red;
	border-radius: 10px;
}
.embedded1{
	width: 100%;
	max-width: 812px;
	height: auto;
	border-radius: 10px;
}


.title img{
	display: block;
	width: 100%;
}

.hero-catch {
	position: relative;
	overflow: hidden;
	margin: 26px 0 0;
	padding: 24px 28px 26px;
	color: #fff;
	background:
		linear-gradient(110deg, rgba(255,255,255,.07) 0 1px, transparent 1px 22px),
		linear-gradient(105deg, #080606 0%, #1b0d0e 55%, #78070c 100%);
	border-top: 2px solid #d9ad5b;
	border-bottom: 2px solid #d9ad5b;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
	text-align: center;
}
.hero-catch::before,
.hero-catch::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 80px;
	height: 1px;
	background: linear-gradient(90deg, transparent, #d9ad5b);
}
.hero-catch::before { left: 18px; }
.hero-catch::after { right: 18px; transform: rotate(180deg); }
.hero-catch p {
	position: relative;
	z-index: 1;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: clamp(1.45rem, 3.8vw, 2.35rem);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: .06em;
	text-shadow: 0 2px 0 #000, 0 0 14px rgba(227, 27, 35, .6);
}
.hero-catch p::before,
.hero-catch p::after {
	content: "◆";
	margin: 0 .55em;
	font-size: .38em;
	vertical-align: middle;
	color: #d9ad5b;
}
.hero-catch span { color: #f02a31; }

/*
 全国大戦 概要
----------------------------------------------------------- */
.overview {
	--vermilion: #e31b23;
	--deep-red: #8e080d;
	--ink: #100d0d;
	--gold: #d9ad5b;
	--paper: #f7f2e8;
	position: relative;
	margin: 28px 0 46px;
	color: var(--ink);
}
.overview::before {
	content: "";
	position: absolute;
	inset: -18px -12px;
	pointer-events: none;
	background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(140, 0, 0, .025) 18px 19px);
}
.overview__intro,
.overview__block {
	position: relative;
	overflow: hidden;
	background-color: rgba(250, 247, 240, .97);
	background-image: radial-gradient(rgba(35, 22, 17, .06) .7px, transparent .7px);
	background-size: 5px 5px;
	border: 1px solid rgba(217, 173, 91, .75);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .24), inset 0 0 0 5px rgba(255, 255, 255, .5);
}
.overview__intro {
	padding: 36px 48px 40px;
	text-align: center;
	clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.overview__intro::before,
.overview__intro::after {
	content: "";
	position: absolute;
	width: 110px;
	height: 110px;
	border: 1px solid rgba(227, 27, 35, .18);
	transform: rotate(45deg);
}
.overview__intro::before { top: -75px; left: -55px; }
.overview__intro::after { right: -55px; bottom: -75px; }
.overview__eyebrow,
.section-heading__en {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 700;
	letter-spacing: .22em;
	color: var(--gold);
}
.overview__eyebrow { font-size: .72rem; margin-bottom: 7px; }
.overview__intro h2 {
	display: inline-block;
	position: relative;
	padding: 0 1em 18px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: .05em;
}
.overview__intro h2 span { color: var(--vermilion); }
.overview__intro h2::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--vermilion) 18%, var(--vermilion) 82%, transparent);
}
.overview__lead {
	max-width: 740px;
	margin: 16px auto 0;
	text-align: left;
}
.overview__lead p {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	font-size: clamp(1.05rem, 2.4vw, 1.45rem);
	font-weight: 800;
	line-height: 1.65;
	letter-spacing: .02em;
}
.overview__lead p + p { margin-top: 7px; }
.overview__lead strong,
.overview__lead .emphasis { color: var(--vermilion); }
.diamond {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-top: .62em;
	background: var(--vermilion);
	box-shadow: 4px 4px 0 rgba(142, 8, 13, .18);
	transform: rotate(45deg);
}
.overview__block { margin-top: 28px; }
.section-heading {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 106px;
	padding: 18px 34px;
	color: #fff;
	background: linear-gradient(105deg, #090707 0%, #201414 55%, #6f080c 100%);
	border-bottom: 3px solid var(--gold);
}
.section-heading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.08) 47%, transparent 58%);
	transform: translateX(-100%);
	pointer-events: none;
}
.is-visible .section-heading::after { animation: headingShine 1.2s .35s ease-out both; }
.section-heading h2 {
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: clamp(1.55rem, 4.5vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: .06em;
	text-shadow: 0 2px 0 #000;
}
.section-heading__en { display: block; margin-bottom: 5px; font-size: .62rem; }
.calendar-icon {
	position: relative;
	flex: 0 0 auto;
	width: 58px;
	height: 54px;
	border: 3px solid var(--gold);
	border-radius: 5px;
}
.calendar-icon::before,
.calendar-icon::after {
	content: "";
	position: absolute;
	top: -9px;
	width: 5px;
	height: 14px;
	border-radius: 3px;
	background: var(--gold);
}
.calendar-icon::before { left: 11px; }
.calendar-icon::after { right: 11px; }
.calendar-icon i {
	position: absolute;
	left: 7px;
	right: 7px;
	top: 13px;
	height: 3px;
	background: var(--gold);
	box-shadow: 0 10px 0 var(--gold), 0 20px 0 var(--gold);
}
.crest-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 62px;
	height: 62px;
	font-family: YuMincho, "Yu Mincho", serif;
	font-size: 1.45rem;
	font-weight: 800;
	color: var(--gold);
	border: 2px solid var(--gold);
	border-radius: 50%;
	box-shadow: inset 0 0 0 4px #170d0d, inset 0 0 0 5px var(--gold);
}
.timeline { padding: 28px 34px 34px; list-style: none; counter-reset: stage; }
.timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(250px, .9fr) 1.35fr;
	min-height: 112px;
	border: 1px solid rgba(142, 8, 13, .35);
	background: rgba(255, 255, 255, .76);
	box-shadow: 0 7px 18px rgba(44, 10, 10, .08);
}
.timeline__item + .timeline__item { margin-top: 34px; }
.timeline__item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(22.5% - 10px);
	bottom: -25px;
	width: 17px;
	height: 17px;
	border-right: 5px solid var(--vermilion);
	border-bottom: 5px solid var(--vermilion);
	transform: rotate(45deg);
}
.timeline__date,
.timeline__event { display: flex; align-items: center; }
.timeline__date {
	flex-direction: column;
	justify-content: center;
	padding: 16px 20px;
	color: #fff;
	background: linear-gradient(135deg, var(--deep-red), var(--vermilion));
	text-align: center;
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
}
.timeline__date > span {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	opacity: .78;
}
.timeline__date strong { font-size: clamp(1.25rem, 3vw, 1.8rem); line-height: 1.35; white-space: nowrap; }
.timeline__date strong span { font-size: .65em; }
.timeline__event { gap: 18px; padding: 18px 28px; }
.timeline__event p {
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: clamp(1.25rem, 3.2vw, 1.9rem);
	font-weight: 800;
	color: var(--deep-red);
}
.timeline__step {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	font-family: YuMincho, "Yu Mincho", serif;
	font-weight: 800;
	color: var(--gold);
	background: var(--ink);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	font-size: 1rem;
}
.timeline__item--final { border-color: var(--gold); box-shadow: 0 0 24px rgba(227, 27, 35, .18); }
.timeline__item--final .timeline__event p { color: var(--vermilion); font-size: clamp(1.45rem, 3.8vw, 2.2rem); }
.conditions__list { padding: 12px 34px 22px; list-style: none; }
.conditions__list li {
	position: relative;
	display: grid;
	grid-template-columns: 82px 1fr;
	align-items: center;
	gap: 24px;
	min-height: 122px;
	padding: 18px 4px;
}
.conditions__list li + li { border-top: 1px solid rgba(142, 8, 13, .28); }
.conditions__number {
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	font-family: YuMincho, "Yu Mincho", serif;
	font-size: 2rem;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(145deg, var(--vermilion), var(--deep-red));
	border-radius: 50% 50% 50% 8px;
	box-shadow: 5px 5px 0 rgba(217, 173, 91, .35);
}
.conditions__list h3 {
	margin-bottom: 5px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: clamp(1.18rem, 2.8vw, 1.65rem);
	line-height: 1.45;
	color: var(--deep-red);
}
.conditions__list h3 span { color: var(--vermilion); }
.conditions__list p { font-size: clamp(.9rem, 2vw, 1.08rem); font-weight: 600; line-height: 1.65; }
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.25,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes headingShine { to { transform: translateX(100%); } }
.read1 p{
	font-size: 1em;
	color:white;
	margin-bottom: 1em;
	text-align: center;
}
.catsch1 h2{
	text-align: center;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	color: red;
	margin: 0.3em;
}
/*
FlexBoxの設定
----------------------------------------------------------- */
/*コンテナ*/
.flexContainer{
	display:flex;
	justify-content: center;

}
/*アイテム*/
.flexItem{
	margin: 0 4%;
}


/*
 フェイドインクラス
----------------------------------------------------------- */
.fadeInUp {
  opacity : 0;
  transform: translateY(20px);
  transition: 1.5s;
}

/*
 メディアクエリ 
----------------------------------------------------------- */
@media (max-width:813px){
	.body1 {
		width: calc(100% - 2em);
		max-width: 900px; /** デザインの最大幅 **/
		margin: 0 auto;
		/*font-family: 'M PLUS 1p', sans-serif;*/
		font-family: "Helvetica Neue",Arial,
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		Meiryo,
		sans-serif;
	}
	.overview { margin-top: 18px; }
	.overview__intro { padding: 28px 24px 30px; }
	.overview__lead p { gap: 11px; }
	.section-heading { min-height: 90px; padding: 16px 20px; gap: 13px; }
	.calendar-icon { width: 47px; height: 44px; }
	.crest-icon { width: 52px; height: 52px; font-size: 1.15rem; }
	.timeline { padding: 20px 18px 25px; }
	.timeline__item { grid-template-columns: 1fr; }
	.timeline__item:not(:last-child)::after { left: calc(50% - 9px); }
	.timeline__date { min-height: 83px; clip-path: none; }
	.timeline__event { min-height: 82px; justify-content: center; padding: 14px 18px; text-align: center; }
	.conditions__list { padding: 8px 18px 18px; }
	.conditions__list li { grid-template-columns: 58px 1fr; gap: 15px; padding: 18px 0; }
	.conditions__number { width: 54px; height: 54px; font-size: 1.45rem; }
}

@media (max-width:600px){
	.hero-catch {
		margin-top: 16px;
		padding: 18px 15px 20px;
	}
	.hero-catch p {
		font-size: 1.25rem;
		line-height: 1.55;
		letter-spacing: .02em;
	}
	.hero-catch p::before,
	.hero-catch p::after { display: none; }
	.hero-catch::before,
	.hero-catch::after { display: none; }
	.overview__intro { padding-inline: 18px; }
	.overview__intro h2 { padding-inline: 0; }
	.overview__lead { margin-top: 13px; }
	.overview__lead p {
		position: relative;
		display: block;
		padding-left: 23px;
		font-size: .98rem;
		line-height: 1.55;
	}
	.overview__lead p + p { margin-top: 10px; }
	.overview__lead .diamond {
		position: absolute;
		left: 1px;
		top: .5em;
		margin-top: 0;
	}
	.section-heading h2 { letter-spacing: .02em; }
	.timeline__date strong { white-space: normal; }
	.conditions__list li { align-items: start; }
	.conditions__number { margin-top: 3px; }
}

@media (prefers-reduced-motion: reduce) {
	.fadeInUp, .reveal { opacity: 1; transform: none; transition: none; }
	.section-heading::after { display: none; }
}

img {
max-width: 100%;
height: auto;
}
img.yohaku1{
margin:20px 0 0 0;
}
img.yohaku2{
margin:20px 0 20px 0;
}