@charset "utf-8";
/* ----------------------------------------------------
 * Story Page Design：共通
 * ------------------------------------------------- */

/* ページタイトル
---------------------------------------------*/
/* 背景：あっきーストーリー */
body.akki01 .page-title {
	background: url("../story/img/akki01_title.jpg") no-repeat center;
	background-size: cover;
}
body.akki02 .page-title {
	background: url("../story/img/akki02_title.jpg") no-repeat center;
	background-size: cover;
}
body.akki03 .page-title {
	background: url("../story/img/akki03_title.jpg") no-repeat center;
	background-size: cover;
}
body.akki04 .page-title {
	background: url("../story/img/akki04_title.jpg") no-repeat center;
	background-size: cover;
}

@media (max-width: 960px) {
body.akki04 .page-title {
	background: url("../story/img/akki04_title.jpg") no-repeat 70% center;
	background-size: cover;
}
}
/* 背景：さーちゃんストーリー */
body.sach01 .page-title {
	background: url("../story/img/sach01_title.jpg") no-repeat center;
	background-size: cover;
}

@media (max-width: 767px) {
body.sach01 .page-title {
	background: url("../story/img/sach01_title.jpg") no-repeat 35% center;
	background-size: cover;
}
}
body.sach02 .page-title {
	background: url("../story/img/sach02_title.jpg") no-repeat center;
	background-size: cover;
}
body.sach03 .page-title {
	background: url("../story/img/sach03_title.jpg") no-repeat center;
	background-size: cover;
}
body.sach04 .page-title {
	background: url("../story/img/sach04_title.jpg") no-repeat center;
	background-size: cover;
}

@media (max-width: 425px) {
body.sach04 .page-title {
	background: url("../story/img/sach04_title.jpg") no-repeat 35% center;
	background-size: cover;
}
}
/* 背景：ここいろストーリー */
body.coco01 .page-title {
	background: url("../story/img/coco01_title.jpg") no-repeat center;
	background-size: cover;
}

@media (max-width: 640px) {
body.coco01 .page-title {
	background: url("../story/img/coco01_title.jpg") no-repeat 80% center;
	background-size: cover;
}
}
body.coco02 .page-title {
	background: url("../story/img/coco02_title.jpg") no-repeat center;
	background-size: cover;
}
body.coco03 .page-title {
	background: url("../story/img/coco03_title.jpg") no-repeat center;
	background-size: cover;
}
@media (max-width: 640px) {
body.coco03 .page-title {
	background: url("../story/img/coco03_title.jpg") no-repeat 20% center;
	background-size: cover;
}
}
body.coco04 .page-title {
	background: url("../story/img/coco04_title.jpg") no-repeat center;
	background-size: cover;
}
body.coco05 .page-title {
	background: url("../story/img/coco05_title.jpg") no-repeat center;
	background-size: cover;
}
body.coco06 .page-title {
	background: url("../story/img/coco06_title.jpg") no-repeat center;
	background-size: cover;
}

@media (max-width: 960px) {
body.coco06 .page-title {
	background: url("../story/img/coco06_title.jpg") no-repeat 20% center;
	background-size: cover;
}
}

/* レイアウト：タイトル文字位置の高さ */
body.story.akki01 .page-title .box,
body.story.coco01 .page-title .box {
	margin-bottom: 50px;
}
@media (max-width: 960px) {
body.story .page-title .box {
	margin-bottom: 30px;
	min-height: 180px;
}
}
/* レイアウト：タイトル文字右寄せ左寄せ */
body.story .page-title {
	text-align: right;
}
body.story.akki04 .page-title {
	text-align: left;
}

@media (max-width: 640px) {
body.story .page-title {
	text-align: left;
}
body.story.sach03 .page-title, 
body.story.sach04 .page-title, 
body.story.coco04 .page-title {
	text-align: right;
}
}

/* レイアウト：タイトル文字サイズ */
body.story .page-title-main {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 2.4rem;
	font-weight: 900;
	letter-spacing: 0;
	color: #fff;
	text-shadow: 1px 0 10px #333;
}
body.story .page-title-sub {
	font-family: 'Yusei Magic', sans-serif;
	font-size: 7.2rem;
	font-weight: normal;
	letter-spacing: 0.1em;
	color: #fff;
	text-shadow: 1px 0 10px #333;
}

@media (max-width: 640px) {
body.story .page-title-main {
	font-size: 2.0rem;
	letter-spacing: 0;
}
body.story .page-title-sub {
	font-size: 4.8rem;
	letter-spacing: -0.05em;
}
body.story.akki01 .page-title-sub,
body.story.akki04 .page-title-sub {
	font-size: 4.6rem;
}
}

@media (max-width: 424px) {
body.story.akki01 .page-title-sub,
body.story.sach02 .page-title-sub,
body.story.coco02 .page-title-sub {
	font-size: 4.2rem;
}
body.story.akki02 .page-title-sub,
body.story.akki03 .page-title-sub,
body.story.coco06 .page-title-sub {
	font-size: 4.6rem;
}
body.story.akki04 .page-title-sub br {
	display: none;
}
}

/* レイアウト：タイトル文字色 */
body.story.coco01 .page-title-main, 
body.story.coco01 .page-title-sub {
	color: #20348a;
	text-shadow: none;
}
body.story.coco03 .page-title-sub {
	text-shadow: 5px 0 20px #333;
}
/* タイトルセット
---------------------------------------------*/
.title-set-story {
	padding-top: 150px;
}
.title-main-story {
	font-family: 'Shippori Mincho B1', serif;
	font-size: 6.0rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-align: center;
}

@media (max-width: 960px) {
.title-main-story {
	letter-spacing: 0;
}
}
@media (max-width: 640px) {
.title-main-story {
	font-size: 4.8rem;
	letter-spacing: -0.05em;
}
}

/* 見出し
---------------------------------------------*/
.midashi-story {
	padding-top: 100px;
	margin-bottom: 50px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 3.0rem;
	font-weight: 900;
	line-height: 1.25;
}
/* レイアウト
---------------------------------------------*/
body.story section {
	margin-bottom: 150px;
}
body.akki02 section.story02, 
body.akki03 section.story01, 
body.akki03 section.story03, 
body.sach01 section.story04, 
body.sach02 section.story01, 
body.sach03 section.story01, 
body.sach03 section.story03, 
body.sach04 section.story02-b, 
body.coco01 section.story02, 
body.coco03 section.story02, 
body.coco06 section.story03 {/* コンテンツ下の空き調整 */
	margin-bottom: 0;
}
body.sach04 section.story02 {/* コンテンツ下の空き調整 */
	margin-bottom: 100px;
}
body.story section .box {
	width: 80%;
}
body.story .cont-right .box {/* コンテンツ右寄せ① */
	margin-left: 20%;
}
body.story .cont-right .midashi-story {/* コンテンツ右寄せ② */
	text-align: right;
}
@media (max-width: 767px) {
body.story section .box {
	width: 100%;
}
body.story .cont-right .box {/* コンテンツ右寄せ① */
	margin-left: 0;
}
body.story .cont-right .midashi-story {/* コンテンツ右寄せ② */
	text-align: left;
}
}

/* 画像：一番目以外 */
body.story .cont-story .image img:not(:first-of-type) {
	margin-top: 30px;
}
/* ボタン
---------------------------------------------*/
body.akki01 .cmn-button, 
body.akki02 .cmn-button, 
body.akki03 .cmn-button, 
body.akki04 .cmn-button {
	background: rgba(96, 171, 26, 0.1);
}
body.akki01 .cmn-button .button a, 
body.akki02 .cmn-button .button a, 
body.akki03 .cmn-button .button a, 
body.akki04 .cmn-button .button a {
	background: #60ab1a url("../img_cmn/i_arrow_right.svg") no-repeat 95% center;
}
body.sach01 .cmn-button, 
body.sach02 .cmn-button, 
body.sach03 .cmn-button, 
body.sach04 .cmn-button {
	background: rgba(32, 52, 138, 0.1);
}
body.sach01 .cmn-button .button a, 
body.sach02 .cmn-button .button a, 
body.sach03 .cmn-button .button a, 
body.sach04 .cmn-button .button a {
	background: #20348a url("../img_cmn/i_arrow_right.svg") no-repeat 95% center;
}
body.coco01 .cmn-button, 
body.coco02 .cmn-button, 
body.coco03 .cmn-button, 
body.coco04 .cmn-button, 
body.coco05 .cmn-button, 
body.coco06 .cmn-button {
	background: rgba(237, 220, 46, 0.1);
}
body.coco01 .cmn-button .button a, 
body.coco02 .cmn-button .button a, 
body.coco03 .cmn-button .button a, 
body.coco04 .cmn-button .button a, 
body.coco05 .cmn-button .button a, 
body.coco06 .cmn-button .button a {
	background: #eddc2e url("../img_cmn/i_arrow_right.svg") no-repeat 95% center;
}
/* ページ最下部：共通：ストーリー
---------------------------------------------*/
body.story .cmn-story {
	background: rgba(237, 220, 46, 0.1);
	padding-top: 50px;
	padding-bottom: 100px;
	margin-bottom: 0;/* コンテンツ下の空き調整 */
}
body.akki04 .footer, 
body.sach04 .footer, 
body.coco06 .footer {
	margin-top: 0;
}
/* ----------------------------------------------------
 * 當山敦己（あっきー）の物語 #01
 * ------------------------------------------------- */
/* akki01：story02
---------------------------------------------*/
body.akki01 .story02 .bg {
	background: url("../story/img/akki01-2.jpg") no-repeat center;
	background-size: cover;
}
body.akki03 .story03 .bg:first-of-type {
	background: url("../story/img/akki03-3.jpg") no-repeat center;
	background-size: cover;
}
body.sach02 .story03 .bg {
	background: url("../story/img/sach02-3.jpg") no-repeat center;
	background-size: cover;
}
body.coco01 .story02 .bg {
	background: url("../story/img/coco01-2.jpg") no-repeat center;
	background-size: cover;
}
body.coco03 .story02 .bg {
	background: url("../story/img/coco03-2.jpg") no-repeat center;
	background-size: cover;
}
body.coco04 .story02 .bg {
	background: url("../story/img/coco04-2.jpg") no-repeat center;
	background-size: cover;
}
body.akki01 .story02 .bg .inner,
body.akki03 .story03 .bg:first-of-type .inner,
body.sach02 .story03 .bg .inner, 
body.coco01 .story02 .bg .inner, 
body.coco03 .story02 .bg .inner, 
body.coco04 .story02 .bg .inner {
	background: rgba(255, 255, 255, 0.8);
}
body.akki01 .story02 .bg .inner.cont-story,
body.akki03 .story03 .bg:first-of-type .inner.cont-story,
body.sach02 .story03 .bg .inner.cont-story, 
body.coco01 .story02 .bg .inner.cont-story, 
body.coco03 .story02 .bg .inner.cont-story, 
body.coco04 .story02 .bg .inner.cont-story {
	padding-bottom: 100px;
}
body.akki01 .story02 .bg .box,
body.akki03 .story03 .bg:first-of-type .box,
body.sach02 .story03 .bg .box, 
body.coco01 .story02 .bg .box, 
body.coco03 .story02 .bg .box, 
body.coco04 .story02 .bg .box {
	margin: 0 auto;
}
body.akki01 .story02 .bg .image,
body.akki03 .story03 .bg .image,
body.sach02 .story03 .bg .image, 
body.coco01 .story02 .bg .image, 
body.coco03 .story02 .bg .image, 
body.coco04 .story02 .bg .image {
	display: none;
}
@media (max-width: 767px) {
body.akki01 .story02 .bg .box, 
body.akki03 .story03 .bg .box,
body.sach02 .story03 .bg .box, 
body.coco01 .story02 .bg .box, 
body.coco03 .story02 .bg .box, 
body.coco04 .story02 .bg .box {
	padding: 0 5%;
}
}

/* akki01：story02-2
---------------------------------------------*/
body.akki01 .story02 > .cont-story {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-direction: row-reverse;
}
body.akki01 .story02 > .cont-story .midashi-story {
	width: 93.125%;
	margin-left: 6.875%;
	padding-left: 258px;
}
body.akki01 .story02 > .cont-story .box {
	flex: 1;
	margin-left: 6.875%;
}
body.akki01 .story02 > .cont-story .image {
	width: 258px;
}
@media (max-width: 767px) {
body.akki01 .story02 > .cont-story .midashi-story {
	width: 100%;
	margin-left: 0;
	padding-left: 0;
}
body.akki01 .story02 > .cont-story .box {
	flex: auto;
	margin-left: 0;
}
body.akki01 .story02 > .cont-story .image {
	margin: 50px auto 0;
}
}

/* akki01：story03
---------------------------------------------*/
body.akki01 .story03 {
	background: url("../story/img/akki01-3.jpg") no-repeat right top;
}
body.akki01 .story03 .title-main-story {
	text-shadow: 3px 3px 10px #fff;
}
body.akki01 .story03 .image {
	display: none;
}
@media (max-width: 767px) {
body.akki01 .story03 {
	background: none;
}
body.akki01 .story03 .image {
	display: block;
	margin: 50px auto 0;
}
body.akki01 .story03 .image img {
	width: 100%;
}
}
/* akki01：story04
---------------------------------------------*/
body.akki01 .story04 .cont-story, 
body.coco02 .story03 .cont-story {
	position: relative;
}
body.akki01 .story04 .box, 
body.coco02 .story03 .box {
	width: 66.25%;
	margin-left: 33.75%;
}
body.akki01 .story04 .image, 
body.coco02 .story03 .image {
	position: absolute;
	top: 100px;
	right: 73.125%;
}
@media (max-width: 767px) {
body.akki01 .story04 .box, 
body.coco02 .story03 .box {
	width: 100%;
	margin-left: 0;
}
body.akki01 .story04 .image, 
body.coco02 .story03 .image {
	position: static;
	top: auto;
	right: auto;
	margin: 50px auto 0;
}
body.akki01 .story04 .image img, 
body.coco02 .story03 .image img {
	width: 100%;
}
}
/* akki01：story05
---------------------------------------------*/
body.akki01 .story05 .bg, 
body.akki02 .story05 .bg {
	background: rgba(96, 171, 26, 0.1);
	padding-bottom: 100px;
}
/* akki01：story06
---------------------------------------------*/
body.akki01 .story06 .cont-story, 
body.sach01 .story04 .bg:first-of-type .cont-story, 
body.sach04 .story02 .cont-story, 
body.coco02 .story04 .cont-story, 
body.coco04 .story03 .title-set-story + .cont-story {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /*横中央*/
	align-items: center; /*縦中央*/
}
body.akki01 .story06 .midashi-story, 
body.sach01 .story04 .bg:first-of-type .midashi-story, 
body.sach04 .story02 .cont-story .midashi-story, 
body.coco02 .story04 .cont-story .midashi-story, 
body.coco04 .story03 .title-set-story + .cont-story .midashi-story {
	width: 100%;
}
body.akki01 .story06 .box, 
body.sach01 .story04 .bg:first-of-type .box, 
body.sach04 .story02 .cont-story .box, 
body.coco02 .story04 .cont-story .box, 
body.coco04 .story03 .title-set-story + .cont-story .box {
	width: 50%;
}
body.akki01 .story06 .image, 
body.sach01 .story04 .bg:first-of-type .image, 
body.sach04 .story02 .cont-story .image, 
body.coco02 .story04 .cont-story .image, 
body.coco04 .story03 .title-set-story + .cont-story .image {
	width: 45%;
	margin-left: 5%;
	text-align: right;
}
body.akki01 .story06 .image img, 
body.sach01 .story04 .bg:first-of-type .image img, 
body.sach04 .story02 .cont-story .image img, 
body.coco02 .story04 .cont-story .image img, 
body.coco04 .story03 .title-set-story + .cont-story .image img {
	width: 100%;
}
@media (max-width: 767px) {
body.akki01 .story06 .box, 
body.sach01 .story04 .bg:first-of-type .box, 
body.sach04 .story02 .cont-story .box, 
body.coco02 .story04 .cont-story .box, 
body.coco04 .story03 .title-set-story + .cont-story .box {
	width: 100%;
}
body.akki01 .story06 .image, 
body.sach01 .story04 .bg:first-of-type .image, 
body.sach04 .story02 .cont-story .image, 
body.coco02 .story04 .cont-story .image, 
body.coco04 .story03 .title-set-story + .cont-story .image {
	width: 80%;
	margin: 50px auto 0;
	text-align: center;
}
}
/* akki01：story06-2
---------------------------------------------*/
body.akki01 .story06 .cont-story:last-of-type, 
body.sach04 .story02 > .cont-story, 
body.coco02 .story04 .cont-story:last-of-type {
	flex-direction: row-reverse;
}
body.akki01 .story06 .cont-story:last-of-type .midashi-story, 
body.sach04 .story02 > .cont-story .midashi-story, 
body.coco02 .story04 .cont-story:last-of-type .midashi-story {
	width: 50%;
	margin-left: 50%;
}
body.akki01 .story06 .cont-story:last-of-type .image, 
body.sach04 .story02 > .cont-story .image, 
body.coco02 .story04 .cont-story:last-of-type .image {
	margin-left: 0;
	margin-right: 5%;
	text-align: left;
}
@media (max-width: 767px) {
body.akki01 .story06 .cont-story:last-of-type .midashi-story, 
body.sach04 .story02 > .cont-story .midashi-story, 
body.coco02 .story04 .cont-story:last-of-type .midashi-story {
	width: 100%;
	margin-left: 0;
}
body.akki01 .story06 .cont-story:last-of-type .image, 
body.sach04 .story02 > .cont-story .image, 
body.coco02 .story04 .cont-story:last-of-type .image {
	width: 80%;
	margin: 50px auto 0;
	text-align: center;
}
}
/* akki01：story07
---------------------------------------------*/
body.akki01 .story07 .cont-story, 
body.sach03 .story04 .cont-story {
	position: relative;
}
body.akki01 .story07 .box, 
body.sach03 .story04 .box {
	width: 50%;
}
body.akki01 .story07 .image, 
body.sach03 .story04 .image {
	position: absolute;
	top: 0;
	left: 56.875%;
}
@media (max-width: 767px) {
body.akki01 .story07 .box, 
body.sach03 .story04 .box {
	width: 100%;
}
body.akki01 .story07 .image, 
body.sach03 .story04 .image {
	position: static;
	top: auto;
	left: auto;
	margin: 50px auto 0;
}
body.akki01 .story07 .image img, 
body.sach03 .story04 .image img {
	width: 100%;
}
}
/* akki01：story07-2
---------------------------------------------*/
body.akki01 .story07 .cont-story:last-of-type .box, 
body.akki01 .story07 .cont-story:nth-last-child(2) .midashi-story, 
body.sach03 .story04 .cont-story:last-of-type .box, 
body.sach03 .story04 .cont-story:nth-last-of-type(2) .midashi-story {
	width: 50%;
	margin-left: 50%;
}
body.akki01 .story07 .cont-story:last-of-type .image, 
body.sach03 .story04 .cont-story:last-of-type .image {
	position: absolute;
	top: 0;
	left: auto;
	right: 56.875%;
}
@media (max-width: 767px) {
body.akki01 .story07 .cont-story:last-of-type .box, 
body.akki01 .story07 .cont-story:nth-last-child(2) .midashi-story, 
body.sach03 .story04 .cont-story:last-of-type .box, 
body.sach03 .story04 .cont-story:nth-last-of-type(2) .midashi-story {
	width: 100%;
	margin-left: 0;
}
body.akki01 .story07 .cont-story:last-of-type .image, 
body.sach03 .story04 .cont-story:last-of-type .image {
	position: static;
	top: auto;
	right: auto;
	margin: 50px auto 0;
}
}
/* ----------------------------------------------------
 * 當山敦己（あっきー）の物語 #02
 * ------------------------------------------------- */
/* akki02：story01
---------------------------------------------*/
body.akki02 .story01 .cont-story, 
body.sach04 .story01 .cont-story, 
body.coco03 .story01 .cont-story {
	position: relative;
}
body.akki02 .story01 .box, 
body.sach04 .story01 .box, 
body.coco03 .story01 .box {
	width: 85%;
	padding-right: 5%;
	padding-bottom: 50px;
	background: rgba(255, 255, 255, 0.8);
}
body.akki02 .story01 .image, 
body.sach04 .story01 .image, 
body.coco03 .story01 .image {
	position: absolute;
	bottom: 0;
	left: 56.875%;
	z-index: -1;
}
@media (max-width: 767px) {
body.akki02 .story01 .box, 
body.sach04 .story01 .box, 
body.coco03 .story01 .box {
	width: 100%;
	padding-right: 0;
	padding-bottom: 0;
}
body.akki02 .story01 .image, 
body.sach04 .story01 .image, 
body.coco03 .story01 .image {
	position: static;
	bottom: auto;
	left: auto;
	z-index: -1;
	margin: 50px auto 0;
}
body.akki02 .story01 .image img, 
body.sach04 .story01 .image img, 
body.coco03 .story01 .image img {
	width: 100%;
}
}

/* akki02：story01-2
---------------------------------------------*/
body.akki02 .story01 .cont-story:last-of-type .box, 
body.sach04 .story01 .cont-story:nth-last-of-type(2) .box, 
body.coco03 .story01 .cont-story:last-of-type .box {
	margin-left: 15%;
	padding-right: 0;
	padding-left: 5%;
}
body.akki02 .story01 .cont-story:last-of-type .image, 
body.sach04 .story01 .cont-story:nth-last-of-type(2) .image, 
body.coco03 .story01 .cont-story:last-of-type .image {
	left: auto;
	right: 56.875%;
}
@media (max-width: 767px) {
body.akki02 .story01 .cont-story:last-of-type .box, 
body.sach04 .story01 .cont-story:nth-last-of-type(2) .box, 
body.coco03 .story01 .cont-story:last-of-type .box {
	margin-left: 0;
	padding-left: 0;
}
body.akki02 .story01 .cont-story:last-of-type .image, 
body.sach04 .story01 .cont-story:nth-last-of-type(2) .image, 
body.coco03 .story01 .cont-story:last-of-type .image {
	right: auto;
}
}
/* akki02：story02
---------------------------------------------*/
body.akki02 .story02 .bg:first-of-type {
	background: rgba(96, 171, 26, 1.0);
	padding-bottom: 100px;
}
body.akki02 .story02 .bg:first-of-type .cont-story, 
body.sach01 .story05 .cont-story:last-of-type, 
body.sach02 .story02 .title-set-story + .cont-story {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
body.akki02 .story02 .bg:first-of-type .midashi-story, 
body.sach01 .story05 .cont-story:last-of-type .midashi-story, 
body.sach02 .story02 .title-set-story + .cont-story .midashi-story {
	width: 100%;
}
body.akki02 .story02 .bg:first-of-type .box, 
body.sach01 .story05 .cont-story:last-of-type .box, 
body.sach02 .story02 .title-set-story + .cont-story .box {
	flex: 1;
	margin-right: 6.875%;
}
body.akki02 .story02 .bg:first-of-type .image, 
body.sach01 .story05 .cont-story:last-of-type .image, 
body.sach02 .story02 .title-set-story + .cont-story .image {
	width: 126px;
}
@media (max-width: 767px) {
body.akki02 .story02 .bg:first-of-type .box, 
body.sach01 .story05 .cont-story:last-of-type .box, 
body.sach02 .story02 .title-set-story + .cont-story .box {
	flex: auto;
	margin-right: 0;
}
body.akki02 .story02 .bg:first-of-type .image, 
body.sach01 .story05 .cont-story:last-of-type .image, 
body.sach02 .story02 .title-set-story + .cont-story .image {
	margin: 50px auto 0;
}
}

/* akki02：story02-2
---------------------------------------------*/
body.akki02 .story02 .bg:last-of-type {
	background: url("../story/img/akki02-2-2.jpg") no-repeat center;
	background-size: cover;
	padding-bottom: 150px;
}
body.akki02 .story02 .bg:last-of-type .image {
	display: none;
}
@media (max-width: 767px) {
body.akki02 .story02 .bg:last-of-type .image {
	display: block;
	margin: 50px auto 0;
}
body.akki02 .story02 .bg:last-of-type .image img {
	width: 100%;
}
}
/* akki02：story03
---------------------------------------------*/
body.akki02 .story03 {
	background: url("../story/img/akki02-3.jpg") no-repeat 15% bottom;
}
/* 背景画像を透過にするステップ①～③
---------------------------------------------*/
body.akki02 .story02 .bg:last-of-type, 
body.akki02 .story03, 
body.sach01 .story02 .bg, 
body.sach02 .story01 .bg, 
body.sach03 .story01 .bg, 
body.sach04 .story02-b, 
body.coco04 .story01 .bg, 
body.coco06 .story03 {/* 背景画像を透過にするステップ① */
	position: relative;
	z-index: 1;
}
body.akki02 .story02 .bg:last-of-type::after, 
body.akki02 .story03::after, 
body.sach01 .story02 .bg::after, 
body.sach02 .story01 .bg::after, 
body.sach03 .story01 .bg::after, 
body.sach04 .story02-b::after, 
body.coco04 .story01 .bg::after, 
body.coco06 .story03::after {/* 背景画像を透過にするステップ② */
	content: "";
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.8);
}
body.akki02 .story02 .bg:last-of-type > .cont-story, 
body.akki02 .story03 .inner, 
body.sach01 .story02 .bg .inner, 
body.sach02 .story01 .bg .inner, 
body.sach03 .story01 .bg .inner, 
body.sach04 .story02-b .inner, 
body.coco04 .story01 .inner, 
body.coco06 .story03 .inner {/* 背景画像を透過にするステップ③ */
	position: relative;
	z-index: 3;
}
/* akki02：story03-2
---------------------------------------------*/
body.akki02 .story03 .cont-story:last-of-type .box {
	width: 50%;
	margin-left: 50%;
}
body.akki02 .story03 .cont-story:last-of-type .image {
	display: none;
}
@media (max-width: 767px) {
body.akki02 .story03 {
	background: none;
}
body.akki02 .story03 .cont-story:last-of-type .box {
	width: 100%;
	margin-left: 0;
}
body.akki02 .story03 .cont-story:last-of-type .image {
	display: block;
	margin: 50px auto 0;
}
body.akki02 .story03 .cont-story:last-of-type .image img {
	width: 100%;
}
}

/* akki02：story04
---------------------------------------------*/
body.akki02 .story04 .cont-story, 
body.akki04 .story01 .cont-story, 
body.sach03 .story02 .cont-story, 
body.coco01 .story03 .cont-story {
	position: relative;
}
body.akki02 .story04 .box, 
body.akki04 .story01 .box, 
body.sach03 .story02 .box, 
body.coco01 .story03 .box {
	width: 66.25%;
}
body.akki02 .story04 .image, 
body.akki04 .story01 .image, 
body.sach03 .story02 .image, 
body.coco01 .story03 .image {
	position: absolute;
	top: 100px;
	left: 73.125%;
}
@media (max-width: 767px) {
body.akki02 .story04 .box, 
body.akki04 .story01 .box, 
body.sach03 .story02 .box, 
body.coco01 .story03 .box {
	width: 100%;
}
body.akki02 .story04 .image, 
body.akki04 .story01 .image, 
body.sach03 .story02 .image, 
body.coco01 .story03 .image {
	position: static;
	top: auto;
	left: auto;
	margin: 50px auto 0;
}
body.akki02 .story04 .image img, 
body.akki04 .story01 .image img, 
body.sach03 .story02 .image img, 
body.coco01 .story03 .image img {
	width: 100%;
}
}
/* akki02：story05 → akki01：story05にまとめて記述
---------------------------------------------*/

/* akki02：story06
---------------------------------------------*/
body.akki02 .story06 {
	background: url("../story/img/akki02-6.jpg") no-repeat center top;
	background-size: contain;
}
body.akki02 .story06 .cont-story:last-of-type .image {
	display: none;
}
@media (max-width: 767px) {
body.akki02 .story06 {
	background: none;
}
body.akki02 .story06 .cont-story:last-of-type .image {
	display: block;
	margin: 50px auto 0;
}
body.akki02 .story06 .cont-story:last-of-type .image img {
	width: 100%;
}
}

/* ----------------------------------------------------
 * 當山敦己（あっきー）の物語 #03
 * ------------------------------------------------- */
/* akki03：story01
---------------------------------------------*/
body.akki03 .story01 .cont-story {
	position: relative;
}
body.akki03 .story01 .box {
	width: 85%;
	padding-right: 5%;
	padding-bottom: 50px;
	background: rgba(255, 255, 255, 0.8);
}
body.akki03 .story01 .image {
	position: absolute;
	top: 50px;
	left: 31.25%;
	z-index: -1;
}
@media (max-width: 767px) {
body.akki03 .story01 .box {
	width: 100%;
	padding-right: 0;
	padding-bottom: 0;
}
body.akki03 .story01 .image {
	position: static;
	top: auto;
	left: auto;
	margin: 50px auto 0;
}
body.akki03 .story01 .image img {
	width: 100%;
}
}
/* akki03：story02 → 特に記述なし
---------------------------------------------*/

/* akki03：story03 → akki01：story02にまとめて記述
---------------------------------------------*/

/* akki03：story03-2
---------------------------------------------*/
body.akki03 .story03 .bg:last-of-type {
	background: rgba(178, 38, 135, 0.1);
	padding-bottom: 150px;
}
/* akki03：story04
---------------------------------------------*/
body.akki03 .story04 .cont-story {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
}
/* story04-1 */
body.akki03 .story04 .inner:nth-of-type(2) .midashi-story {
	width: 100%;
}
body.akki03 .story04 .inner:nth-of-type(2) .box {
	flex: 1;
	margin-right: 6.875%;
}
body.akki03 .story04 .inner:nth-of-type(2) .image {
	width: 258px;
}
@media (max-width: 767px) {
body.akki03 .story04 .inner:nth-of-type(2) .box {
	flex: auto;
	margin-right: auto;
}
body.akki03 .story04 .inner:nth-of-type(2) .image {
	margin: 50px auto 0;
}
}
/* story04-2 */
body.akki03 .story04 .inner:nth-last-of-type(3) {
	flex-direction: row-reverse;
}
body.akki03 .story04 .inner:nth-last-of-type(3) .image {
	position: absolute;
	bottom: 0;
	left: -10%;
	z-index: -1;
	opacity: 0.2;
}
@media (max-width: 767px) {
body.akki03 .story04 .inner:nth-last-of-type(3) .image {
	position: static;
	bottom: auto;
	left: auto;
	opacity: 1;
	margin: 50px auto 0;
}
body.akki03 .story04 .inner:nth-last-of-type(3) .image img {
	width: 100%;
}
}
/* story04-3 */
body.akki03 .story04 .inner:last-of-type .box {
	width: 66.25%;
}
body.akki03 .story04 .inner:last-of-type .image {
	position: absolute;
	top: 0;
	left: 73.125%;
}
@media (max-width: 767px) {
body.akki03 .story04 .inner:last-of-type .box {
	width: 100%;
}
body.akki03 .story04 .inner:last-of-type .image {
	position: static;
	top: auto;
	left: auto;
	margin: 50px auto 0;
}
}
@media (max-width: 511px) {
body.akki03 .story04 .inner:last-of-type .image img {
	width: 100%;
}
}

/* akki03：story05
---------------------------------------------*/
body.akki03 .story05 .cont-story {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
body.akki03 .story05 .cont-story .midashi-story {
	width: 100%;
}
body.akki03 .story05 .cont-story .box {
	flex: 1;
	margin-right: 6.875%;
}
body.akki03 .story05 .cont-story .image {
	width: 192px;
}
@media (max-width: 767px) {
body.akki03 .story05 .cont-story .box {
	flex: auto;
	margin-right: 0;
}
body.akki03 .story05 .cont-story .image {
	margin: 50px auto 0;
}
}
/* akki03：story06
---------------------------------------------*/
body.akki03 .story06 {
	background: url("../story/img/akki03-6.jpg") no-repeat right top;
}
body.akki03 .story06 .image {
	display: none;
}
@media (max-width: 767px) {
body.akki03 .story06 {
	background: none;
}
body.akki03 .story06 .image {
	display: block;
	margin: 50px auto 0;
}
body.akki03 .story06 .image img {
	width: 100%;
}
}

/* ----------------------------------------------------
 * 當山敦己（あっきー）の物語 #04
 * ------------------------------------------------- */
/* akki04：story01 → akki02：story04にまとめて記述
---------------------------------------------*/

/* akki04：story02
---------------------------------------------*/
body.akki04 .story02 .bg {
	background: url("../story/img/akki04-2.jpg") no-repeat center;
	background-size: cover;
}
body.akki04 .story02 .bg .inner {
	background: rgba(255, 255, 255, 0.5);
}
body.akki04 .story02 .bg .inner.cont-story {
	padding-bottom: 100px;
}
body.akki04 .story02 .bg .box {
	margin: 0 auto;
}
body.akki04 .story02 .bg .image {
	display: none;
}
@media (max-width: 767px) {
body.akki04 .story02 .bg .box {
	padding: 0 5%;
}
}
/* akki04：story03
---------------------------------------------*/
body.akki04 .story03 .cont-story {
	position: relative;
}
body.akki04 .story03 .title-set-story + .cont-story .image {
	position: absolute;
	bottom: 0;
	left: 45%;
	z-index: -1;
}
@media (max-width: 767px) {
body.akki04 .story03 .title-set-story + .cont-story .image {
	position: static;
	bottom: auto;
	left: auto;
	margin: 50px auto 0;
}
body.akki04 .story03 .title-set-story + .cont-story .image img {
	width: 100%;
}
}

/* akki04：story03-2
---------------------------------------------*/
body.akki04 .story03 .cont-story:last-of-type, 
body.sach02 .story02 .cont-story:last-of-type, 
body.coco06 .story01 .cont-story:last-of-type, 
body.coco06 .story02 .cont-story.cont-right {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-direction: row-reverse;
}
body.akki04 .story03 .cont-story:last-of-type .midashi-story, 
body.sach02 .story02 .cont-story:last-of-type .midashi-story, 
body.coco06 .story01 .cont-story:last-of-type .midashi-story, 
body.coco06 .story02 .cont-story.cont-right .midashi-story {
	width: 100%;
	text-align: right;
}
body.akki04 .story03 .cont-story:last-of-type .box, 
body.sach02 .story02 .cont-story:last-of-type .box, 
body.coco06 .story01 .cont-story:last-of-type .box, 
body.coco06 .story02 .cont-story.cont-right .box {
	flex: 1;
	margin-left: 6.875%;
}
body.akki04 .story03 .cont-story:last-of-type .image {
	width: 192px;
}
body.sach02 .story02 .cont-story:last-of-type .image, 
body.coco06 .story01 .cont-story:last-of-type .image, 
body.coco06 .story02 .cont-story.cont-right .image {
	width: 258px;
}
@media (max-width: 767px) {
body.akki04 .story03 .cont-story:last-of-type .midashi-story, 
body.sach02 .story02 .cont-story:last-of-type .midashi-story, 
body.coco06 .story01 .cont-story:last-of-type .midashi-story, 
body.coco06 .story02 .cont-story.cont-right .midashi-story {
	text-align: left;
}
body.akki04 .story03 .cont-story:last-of-type .box, 
body.sach02 .story02 .cont-story:last-of-type .box, 
body.coco06 .story01 .cont-story:last-of-type .box, 
body.coco06 .story02 .cont-story.cont-right .box {
	flex: auto;
	margin-left: 0;
}
body.akki04 .story03 .cont-story:last-of-type .image,
body.sach02 .story02 .cont-story:last-of-type .image, 
body.coco06 .story01 .cont-story:last-of-type .image, 
body.coco06 .story02 .cont-story.cont-right .image {
	margin: 50px auto 0;
}
}

/* akki04：story04
---------------------------------------------*/
body.akki04 .story04 .bg {
	background: rgba(5, 177, 217, 1.0);
	padding-bottom: 100px;
}
body.coco06 .story02 .bg {
	background: rgba(5, 177, 217, 0.1);
	padding-bottom: 100px;
}
body.akki04 .story04 .bg .cont-story, 
body.akki04 .story06 .title-set-story + .cont-story, 
body.coco01 .story01 .title-set-story + .cont-story, 
body.coco06 .story01 .title-set-story + .cont-story, 
body.coco06 .story02 .bg .cont-story {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
body.akki04 .story04 .bg .midashi-story, 
body.akki04 .story06 .title-set-story + .cont-story .midashi-story, 
body.coco01 .story01 .title-set-story + .cont-story .midashi-story, 
body.coco06 .story01 .title-set-story + .cont-story .midashi-story, 
body.coco06 .story02 .bg .midashi-story {
	width: 100%;
}
body.akki04 .story04 .bg .box, 
body.akki04 .story06 .title-set-story + .cont-story .box, 
body.coco01 .story01 .title-set-story + .cont-story .box, 
body.coco06 .story01 .title-set-story + .cont-story .box, 
body.coco06 .story02 .bg .box {
	flex: 1;
	margin-right: 6.875%;
}
body.akki04 .story04 .bg .image, 
body.akki04 .story06 .title-set-story + .cont-story .image, 
body.coco01 .story01 .title-set-story + .cont-story .image, 
body.coco06 .story01 .title-set-story + .cont-story .image, 
body.coco06 .story02 .bg .image {
	width: 258px;
}
@media (max-width: 767px) {
body.akki04 .story04 .bg .box, 
body.akki04 .story06 .title-set-story + .cont-story .box, 
body.coco01 .story01 .title-set-story + .cont-story .box, 
body.coco06 .story01 .title-set-story + .cont-story .box, 
body.coco06 .story02 .bg .box {
	flex: auto;
	margin-right: 0;
}
body.akki04 .story04 .bg .image, 
body.akki04 .story06 .title-set-story + .cont-story .image, 
body.coco01 .story01 .title-set-story + .cont-story .image, 
body.coco06 .story01 .title-set-story + .cont-story .image, 
body.coco06 .story02 .bg .image {
	margin: 50px auto 0;
}
}
/* akki04：story05
---------------------------------------------*/
body.akki04 .story05 .cont-story {
	position: relative;
}
body.akki04 .story05 .box {
	width: 50%;
}
body.akki04 .story05 .image {
	position: absolute;
	top: 0;
	left: 56.875%;
}
@media (max-width: 767px) {
body.akki04 .story05 .box {
	width: 100%;
}
body.akki04 .story05 .image {
	position: static;
	top: auto;
	left: auto;
	margin: 50px auto 0;
}
body.akki04 .story05 .image img {
	width: 100%;
}
}

/* akki04：story05-2
---------------------------------------------*/
body.akki04 .story05 .cont-story:nth-last-of-type(2) .midashi-story, 
body.akki04 .story05 .cont-story:last-of-type .box {
	width: 50%;
	margin-left: 50%;
}
body.akki04 .story05 .cont-story:last-of-type .image {
	position: absolute;
	top: 0;
	left: auto;
	right: 56.875%;
}
@media (max-width: 767px) {
body.akki04 .story05 .cont-story:nth-last-of-type(2) .midashi-story, 
body.akki04 .story05 .cont-story:last-of-type .box {
	width: 100%;
	margin-left: 0;
}
body.akki04 .story05 .cont-story:last-of-type .image {
	position: static;
	top: auto;
	right: auto;
	margin: 50px auto 0;
}
}
/* akki04：story06 → akki04：story04にまとめて記述（レイアウト）
---------------------------------------------*/
body.akki04 .story06 .cont-right .honbun:last-of-type {
	text-align: right;
}
/* ----------------------------------------------------
 * 高畑桜（さーちゃん）の物語 #01
 * ------------------------------------------------- */
/* sach01：story01
---------------------------------------------*/
body.sach01 .story01 .cont-story {
	position: relative;
}
body.sach01 .story01 .box {
	width: 85%;
	padding-right: 5%;
	padding-bottom: 50px;
	background: rgba(255, 255, 255, 0.8);
}
body.sach01 .story01 .image {
	position: absolute;
	top: 50px;
	left: 31.25%;
	z-index: -1;
}
@media (max-width: 767px) {
body.sach01 .story01 .box {
	width: 100%;
	padding-right: 0;
	padding-bottom: 0;

}
body.sach01 .story01 .image {
	position: static;
	top: auto;
	left: auto;
	margin: 50px auto 0;
}
body.sach01 .story01 .image img {
	width: 100%;
}
}
/* sach01：story02
---------------------------------------------*/
body.sach01 .story02 .cont-story, 
body.sach01 .story03 .cont-story, 
body.coco05 .story01 .cont-story {
	position: relative;
}
body.sach01 .story02 .bg {
	background: url(../story/img/sach01-2.jpg) no-repeat left top;
}
body.sach01 .story02 .bg .box, 
body.sach01 .story03 .box, 
body.coco05 .story01 .box {
	width: 66.25%;
}
body.sach01 .story02 .bg .image, 
body.sach01 .story03 .image, 
body.coco05 .story01 .image {
	position: absolute;
	top: 0;
	left: 73.125%;
}
body.sach01 .story02 .bg .image img {
	width: 460px;
}
@media (max-width: 767px) {
body.sach01 .story02 .bg .box, 
body.sach01 .story03 .box, 
body.coco05 .story01 .box {
	width: 100%;
}
body.sach01 .story02 .bg .image, 
body.sach01 .story03 .image, 
body.coco05 .story01 .image {
	position: static;
	top: auto;
	left: auto;
	margin: 50px auto 0;
}
body.sach01 .story02 .bg .image img,
body.sach01 .story03 .image img, 
body.coco05 .story01 .image img {
	width: 100%;
}
}

/* sach01：story02-2
---------------------------------------------*/
body.sach01 .story02 > .cont-story {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-direction: row-reverse;
}
body.sach01 .story02 > .cont-story .midashi-story {
	width: 100%;
	text-align: right;
}
body.sach01 .story02 > .cont-story .box {
	flex: 1;
	margin-left: 6.875%;
}
body.sach01 .story02 > .cont-story .image {
	width: 126px;
}
@media (max-width: 767px) {
body.sach01 .story02 > .cont-story .midashi-story {
	text-align: left;
}
body.sach01 .story02 > .cont-story .box {
	flex: auto;
	margin-left: 0;
}
body.sach01 .story02 > .cont-story .image {
	margin: 50px auto 0;
}
}
/* sach01：story03 → sach01：story02にまとめて記述
---------------------------------------------*/

/* sach01：story03-2
---------------------------------------------*/
body.sach01 .story03 .cont-story:nth-last-of-type(2) .midashi-story, 
body.sach01 .story03 .cont-story:last-of-type .box, 
body.sach02 .story01 .cont-story:nth-last-of-type(2) .midashi-story, 
body.sach02 .story01 .cont-story:last-of-type .box, 
body.sach03 .story01 .midashi-story, 
body.sach03 .story01 .box, 
body.coco01 .story02 > .cont-story .midashi-story, 
body.coco01 .story02 > .cont-story .box, 
body.coco04 .story01 .cont-story:nth-last-of-type(2) .midashi-story, 
body.coco04 .story01 .cont-story:last-of-type .box, 
body.coco05 .story01 .cont-story:nth-last-of-type(4) .midashi-story, 
body.coco05 .story01 .cont-story:nth-last-of-type(3) .box {
	width: 66.25%;
	margin-left: 33.75%;
}
body.sach01 .story03 .cont-story:last-of-type .image, 
body.sach02 .story01 .cont-story:last-of-type .image, 
body.sach03 .story01 .image, 
body.coco01 .story02 > .cont-story .image, 
body.coco04 .story01 .cont-story:last-of-type .image, 
body.coco05 .story01 .cont-story:nth-last-of-type(3) .image {
	position: absolute;
	top: 0;
	left: auto;
	right: 73.125%;
}
@media (max-width: 767px) {
body.sach01 .story03 .cont-story:nth-last-of-type(2) .midashi-story, 
body.sach01 .story03 .cont-story:last-of-type .box, 
body.sach02 .story01 .cont-story:nth-last-of-type(2) .midashi-story, 
body.sach02 .story01 .cont-story:last-of-type .box, 
body.sach03 .story01 .midashi-story, 
body.sach03 .story01 .box, 
body.coco01 .story02 > .cont-story .midashi-story, 
body.coco01 .story02 > .cont-story .box, 
body.coco04 .story01 .cont-story:nth-last-of-type(2) .midashi-story, 
body.coco04 .story01 .cont-story:last-of-type .box, 
body.coco05 .story01 .cont-story:nth-last-of-type(4) .midashi-story, 
body.coco05 .story01 .cont-story:nth-last-of-type(3) .box {
	width: 100%;
	margin-left: 0;
}
body.sach01 .story03 .cont-story:last-of-type .image, 
body.sach02 .story01 .cont-story:last-of-type .image, 
body.sach03 .story01 .image, 
body.coco01 .story02 > .cont-story .image, 
body.coco04 .story01 .cont-story:last-of-type .image, 
body.coco05 .story01 .cont-story:nth-last-of-type(3) .image {
	position: static;
	top: auto;
	right: auto;
	margin: 50px auto 0;
}
body.sach01 .story03 .cont-story:last-of-type .image img, 
body.sach02 .story01 .cont-story:last-of-type .image img, 
body.sach03 .story01 .image img, 
body.coco01 .story02 > .cont-story .image img, 
body.coco04 .story01 .cont-story:last-of-type .image img, 
body.coco05 .story01 .cont-story:nth-last-of-type(3) .image img {
	width: 100%;
}
}
/* sach01：story04 → akki01：story06にまとめて記述（レイアウト）
---------------------------------------------*/
body.sach01 .story04 .bg:first-of-type {
	background: rgba(5, 177, 217, 1.0);
	padding-bottom: 100px;
}
body.sach01 .story04 pre {
	font-family: 'Noto Sans JP', sans-serif;
	font-style: italic;
	line-height: 1.875;
}
/* sach01：story04-2
---------------------------------------------*/
body.sach01 .story04 .bg:last-of-type {
	background: rgba(5, 177, 217, 0.1);
	padding-bottom: 150px;
}
/* sach01：story05
---------------------------------------------*/
body.sach01 .story05 .cont-story {
	position: relative;
}
body.sach01 .story05 .title-set-story + .cont-story .image {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: -1;
	opacity: 1.0;
}
@media (max-width: 767px) {
body.sach01 .story05 .title-set-story + .cont-story .image {
	position: static;
	bottom: auto;
	left: auto;
	margin: 50px auto 0;
}
body.sach01 .story05 .title-set-story + .cont-story .image img {
	width: 100%;
}
}

/* sach01：story05-3 → akki02：story02にまとめて記述
---------------------------------------------*/

/* ----------------------------------------------------
 * 高畑桜（さーちゃん）の物語 #02
 * ------------------------------------------------- */
/* sach02：story01 → sach01：story03-2にまとめて記述（レイアウト）
---------------------------------------------*/
body.sach02 .story01 .cont-story,
body.sach03 .story01 .cont-story {
	position: relative;
}
body.sach02 .story01 .bg {
	background: url(../story/img/sach02-1.jpg) no-repeat right bottom;
	padding-bottom: 150px;
}
body.sach03 .story01 .bg {
	background: url(../story/img/sach03-1.jpg) no-repeat right bottom;
	padding-bottom: 150px;
}
body.sach02 .story01 .cont-story:last-of-type .image img,
body.sach03 .story01 .image img {
	width: 460px;
}
@media (max-width: 767px) {
body.sach02 .story01 .cont-story:last-of-type .image,
body.sach03 .story01 .image {
	margin: 50px auto 0;
	text-align: center;
}
}
@media (max-width: 460px) {
body.sach02 .story01 .cont-story:last-of-type .image img,
body.sach03 .story01 .image img {
	width: 100%;
}
}
/* sach02：story02 → akki02：story02にまとめて記述
---------------------------------------------*/
/* sach02：story02-2 → akki04：story03-2にまとめて記述
---------------------------------------------*/
/* sach02：story03 → akki01：story02にまとめて記述
---------------------------------------------*/

/* ----------------------------------------------------
 * 高畑桜（さーちゃん）の物語 #03
 * ------------------------------------------------- */
/* sach03：story01 → sach01：story03-2にまとめて記述（レイアウト）
   sach03：story01 → sach02：story01にまとめて記述
---------------------------------------------*/


/* sach03：story02 → akki02：story04にまとめて記述
---------------------------------------------*/
/* sach03：story03
---------------------------------------------*/
body.sach03 .story03 .bg {
	background: rgba(96, 171, 26, 1.0);
	padding-bottom: 100px;
}
/* sach03：story04 → akki01：story07にまとめて記述
---------------------------------------------*/

/* ----------------------------------------------------
 * 高畑桜（さーちゃん）の物語 #04
 * ------------------------------------------------- */
/* sach04：story01 → akki02：story07にまとめて記述
---------------------------------------------*/
/* sach04：story02 → akki01：story06にまとめて記述
---------------------------------------------*/
body.sach04 .story02 .bg {
	background: rgba(5, 177, 217, 0.1);
	padding-bottom: 100px;
}
/* sach04：story02-b
---------------------------------------------*/
body.sach04 .story02-b {
	background: url(../story/img/sach04-2-3.jpg) no-repeat center;
	background-size: cover;
	padding-bottom: 150px;
}
body.sach04 .story02-b .box {
	margin: 0 auto;
}
body.sach04 .story02-b .image {
	display: none;
}
@media (max-width: 767px) {
body.sach04 .story02-b .image {
	display: block;
	margin: 50px auto 0;
}
body.sach04 .story02-b .image img {
	width: 100%;
}
}

/* sach04：story03-2
---------------------------------------------*/
body.sach04 .story03 .cont-story:nth-last-of-type(2) {
	position: relative;
}
body.sach04 .story03 .cont-story:nth-last-of-type(2) .box {
	width: 50%;
	margin-left: 50%;
}
body.sach04 .story03 .cont-story:nth-last-of-type(2) .image {
	position: absolute;
	bottom: 0;
	left: -10%;
	z-index: -1;
	opacity: 1.0;
}
@media (max-width: 767px) {
body.sach04 .story03 .cont-story:nth-last-of-type(2) .box {
	width: 100%;
	margin-left: 0;
}
body.sach04 .story03 .cont-story:nth-last-of-type(2) .image {
	position: static;
	bottom: auto;
	left: auto;
	margin: 50px auto 0;
}
body.sach04 .story03 .cont-story:nth-last-of-type(2) .image img {
	width: 100%;
}
}
body.sach04 .story03 .cont-story:last-of-type .honbun:last-of-type {
	text-align: right;
}
/* ----------------------------------------------------
 * ここいろhiroshimaの物語 #01
 * ------------------------------------------------- */
/* coco01：story01 → akki04：story04にまとめて記述（レイアウト）
---------------------------------------------*/
body.coco01 .story01 .title-set-story + .cont-story .image {
	margin-top: 100px;
}
body.coco01 .story01 .title-set-story + .cont-story .image img:nth-of-type(n+2) {
	margin-top: 30px;
}
/* coco01：story02 → akki01：story02にまとめて記述
---------------------------------------------*/
/* coco01：story02-2 → sach01：story03-2にまとめて記述
---------------------------------------------*/
body.coco01 .story02 > .cont-story {
	position: relative;
}
/* coco01：story03 → akki02：story04にまとめて記述
---------------------------------------------*/

/* ----------------------------------------------------
 * ここいろhiroshimaの物語 #02
 * ------------------------------------------------- */
 /* coco02：story01
---------------------------------------------*/
body.coco02 .story01 .cont-story.cont-right, 
body.coco05 .story02 .cont-story.cont-right {
	position: relative;
}
body.coco02 .story01 .cont-story.cont-right .box, 
body.coco05 .story02 .cont-story.cont-right .box {
	width: 66.25%;
	margin-left: 33.75%;
}
body.coco02 .story01 .cont-story.cont-right .image, 
body.coco05 .story02 .cont-story.cont-right .image {
	position: absolute;
	bottom: 0;
	left: -10%;
	z-index: -1;
	opacity: 0.5;
}
@media (max-width: 767px) {
body.coco02 .story01 .cont-story.cont-right .box, 
body.coco05 .story02 .cont-story.cont-right .box {
	width: 100%;
	margin-left: 0;
}
body.coco02 .story01 .cont-story.cont-right .image, 
body.coco05 .story02 .cont-story.cont-right .image {
	position: static;
	bottom: auto;
	left: auto;
	opacity: 1.0;
	margin: 50px auto 0;
}
body.coco02 .story01 .cont-story.cont-right .image img, 
body.coco05 .story02 .cont-story.cont-right .image img {
	width: 100%;
}
}
/* coco02：story02
---------------------------------------------*/
body.coco02 .story02 .bg {
	background: rgba(5, 177, 217, 1.0);
	padding-bottom: 100px;
}
body.coco02 .story02 .bg .box {
	margin: 0 auto;
}
/* coco02：story03 → akki01：story04にまとめて記述
---------------------------------------------*/
 /* coco02：story04 → akki01：story06にまとめて記述
---------------------------------------------*/
 /* coco02：story05
---------------------------------------------*/
body.coco02 .story05 {
	background: url("../story/img/coco02-5.jpg") no-repeat;
	background-size: cover;
	padding-bottom: 150px;
}
body.coco02 .story05 .image {
	display: none;
}
@media (max-width: 767px) {
body.coco02 .story05 {
	background: none;
	padding-bottom: 0;
}
body.coco02 .story05 .image {
	display: block;
	margin: 50px auto 0;
}
body.coco02 .story05 .image img {
	width: 100%;
}
}
/* ----------------------------------------------------
 * ここいろhiroshimaの物語 #03
 * ------------------------------------------------- */
 /* coco03：story01 → akki02：story01にまとめて記述
---------------------------------------------*/
 /* coco03：story02 → akki01：story02にまとめて記述
---------------------------------------------*/
 /* coco03：story03
---------------------------------------------*/
body.coco03 .story03 .cont-story {
	position: relative;
}
body.coco03 .story03 .cont-story .image {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: -1;
	opacity: 0.5;
}
@media (max-width: 767px) {
body.coco03 .story03 .cont-story .image {
	position: static;
	bottom: auto;
	left: auto;
	opacity: 1.0;
	margin: 50px auto 0;
}
body.coco03 .story03 .cont-story .image img {
	width: 100%;
}
}
/* ----------------------------------------------------
 * ここいろhiroshimaの物語 #04
 * ------------------------------------------------- */
 /* coco04：story01 → sach01：story03-2にまとめて記述（レイアウト）
---------------------------------------------*/
body.coco04 .story01 .cont-story {
	position: relative;
}
body.coco04 .story01 .bg {
	background: url(../story/img/coco04-1.jpg) no-repeat right bottom;
	padding-bottom: 150px;
}
body.coco04 .story01 .cont-story .image img {
	width: 460px;
}
/* coco04：story02 → akki01：story02にまとめて記述
---------------------------------------------*/
 /* coco04：story03 → akki01：story06にまとめて記述
---------------------------------------------*/
/* coco04：story03-2
---------------------------------------------*/
body.coco04 .story03 .cont-story:last-of-type {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-direction: row-reverse;
}
body.coco04 .story03 .cont-story:nth-last-of-type(2) .midashi-story {
	text-align: right;
}
body.coco04 .story03 .cont-story:last-of-type .box {
	flex: 1;
	margin-left: 6.875%;
}
body.coco04 .story03 .cont-story:last-of-type .image {
	width: 460px;
}
@media (max-width: 960px) {
body.coco04 .story03 .cont-story:last-of-type .box {
	flex: auto;
	width: 50%;
	margin-left: 6.875%;
}
body.coco04 .story03 .cont-story:last-of-type .image {
	width: 43.125%;
}
body.coco04 .story03 .cont-story:last-of-type .image img {
	width: 100%;
}
}
@media (max-width: 767px) {
body.coco04 .story03 .cont-story:last-of-type .box {
	width: 100%;
	margin-left: 0;
}
body.coco04 .story03 .cont-story:last-of-type .image {
	width: 100%;
	margin: 50px auto 0;
}
body.coco04 .story03 .cont-story:last-of-type .image img {
	width: 100%;
}
}
/* ----------------------------------------------------
 * ここいろhiroshimaの物語 #05
 * ------------------------------------------------- */
 /* coco05：story01 → sach01：story03-2にまとめて記述
---------------------------------------------*/
 /* coco05：story01-2 → sach01：story02にまとめて記述
---------------------------------------------*/
 /* coco05：story02 → coco02：story01にまとめて記述
---------------------------------------------*/


/* ----------------------------------------------------
 * ここいろhiroshimaの物語 #06
 * ------------------------------------------------- */
 /* coco06：story01 → akki04：story04にまとめて記述
---------------------------------------------*/
 /* coco06：story01-2 → akki04：story03-2にまとめて記述
---------------------------------------------*/
 /* coco06：story02 → akki04：story04にまとめて記述
---------------------------------------------*/
 /* coco06：story02-2 → akki04：story03-2にまとめて記述
---------------------------------------------*/



 /* coco06：story03
---------------------------------------------*/
/* 画像はポジションではなく、背景で表示 */
body.coco06 .story03 {
	background: url("../story/img/coco06-3.jpg") no-repeat center top;
	padding-bottom: 150px;
}
body.coco06 .story03 .cont-story .box {
	margin-left: 10%;
	width: 66.25%;
}
body.coco06 .story03 .cont-story.cont-right .box {
	margin-left: 23.75%;
}
body.coco06 .story03 .cont-story .image {
	display: none;
}
@media (max-width: 767px) {
body.coco06 .story03 {
	background: url("../story/img/coco06-3.jpg") no-repeat 20% top;
	padding-bottom: 150px;
}
body.coco06 .story03 .cont-story .box {
	margin-left: 0;
	width: 100%;
}
body.coco06 .story03 .cont-story.cont-right .box {
	margin-left: 0;
}
}

/* coco06：story04
---------------------------------------------*/
body.coco06 .story04 .box {
	margin: 0 auto;
}
body.coco06 .story04 .cont-story .honbun:last-of-type {
	text-align: right;
}