@charset "utf-8";

#contents_area {
	--c-blue: #006fbc;
	--c-yellow: #fff014;
	--c-green: #3ca096;
	--c-light-green: #d2ffc8;
	--c-gray: #bababa;
	--c-text: #000;
	--c-text-blue: var(--c-blue);
}

.btn_pagetop {
	display: none;
}

@media print, screen and (min-width : 769px){
	#contents_area {
		position: relative;
		z-index: 1;
		min-width: 980px;
		color: var(--c-text);
		font-size: 16px;
		line-height: 1.5;
		font-feature-settings: 'palt' 1;
	}

	#contents_area .sp {
		display: none !important;
	}

	#contents_area .bold,
	#contents_area .bold_pc {
		font-weight: normal;
		font-family: 'HondaGlobalFontJP-Bold', sans-serif;
	}

	.section {
		position: relative;
		z-index: 1;
		margin: 240px auto 0;
	}
	.section:first-child {
		margin-top: 0;
	}

	.section img {
		display: block;
		max-width: 100%;
	}
	.section sup {
		vertical-align: top;
		font-size: 75%;
	}
	.section a {
		transition: .3s opacity;
	}
	.section a:hover {
		opacity: .7;
	}

	.section .anc {
		position: absolute;
		top: -48px;
	}

	.section .drop_shadow {
		filter: drop-shadow(0 3px 50px rgba(0,0,0,.16));
	}

	.section h2 {
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		height: 113px;
		margin-bottom: 65px;
		background: var(--c-blue);
		border: solid #000;
		border-width: 2px 0;
	}
	.section h2 img {
		height: 52px;
	}

	.section_inner {
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		max-width: 980px;
		margin: auto;
	}

	.section .num {
		display: flex;
		justify-content: center;
		margin: -113px 0 32px;
	}


/* ----------------------------------------
	section_title
---------------------------------------- */

	#section_title {
		padding-top: 17px;
		text-align: center;
	}

	#section_title .heading {
		margin-top: 11px;
		padding: 45px 0 65px;
		border: 2px solid #000;
		border-radius: 10px;
		background: var(--c-light-green);
	}

	#section_title .copy {
		color: var(--c-text-blue);
		font-size: 34px;
		line-height: calc(56 / 34);
	}

	#section_title .keyword {
		display: inline-block;
		margin: 0 15px;
		vertical-align: text-bottom;
	}

	#section_title .text {
		margin-top: 55px;
		font-size: 18px;
		line-height: calc(34 / 18);
	}

	#section_title .nav {
		display: flex;
		justify-content: space-between;
		margin-top: 30px;
	}
	#section_title .nav li {
		width: 475px;
	}
	#section_title .nav a {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		position: relative;
		box-sizing: border-box;
		height: 105px;
		padding-top: 25px;
		border: 2px solid #000;
		border-radius: 10px;
		background: var(--c-green);
	}
	#section_title .nav a::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 17px;
		border: solid transparent;
		border-width: 14px 8px 0;
		border-top-color: var(--c-yellow);
		transform: translateX(-50%);
	}
	#section_title .nav a img {
		filter: drop-shadow(0 3px 50px rgba(0,0,0,.16));
	}


/* ----------------------------------------
	section_manga
---------------------------------------- */

	#section_manga .copy {
		padding-bottom: 30px;
		background: url(../img/manga_copy_line_pc.svg) 50% 100% no-repeat;
		text-align: center;
		letter-spacing: .04em;
		color: var(--c-blue);
		font-size: 33px;
		line-height: 1;
	}

	#section_manga .author {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: flex-start;
		position: relative;
		box-sizing: border-box;
		margin-top: 35px;
		min-height: 244px;
		padding: 30px 0 20px 306px;
	}

	#section_manga .author figure {
		position: absolute;
		left: 15px;
		top: 0;
		width: 244px;
	}

	#section_manga .name {
		font-size: 22px;
		line-height: 1;
	}

	#section_manga .sns {
		display: flex;
		order: 3;
		margin-top: 38px;
	}
	#section_manga .sns li {
		width: 39px;
		margin-right: 37px;
	}

	#section_manga .text {
		margin-top: 18px;
	}

	#section_manga .comingsoon {
		margin-top: 60px;
	}

	#section_manga .list {
		margin-top: 110px;
	}
	#section_manga .list>li {
		position: relative;
		padding: 50px 0 40px;
		border: 2px solid #000;
		border-radius: 10px;
		background: var(--c-light-green);
	}
	#section_manga .list>li+li {
		margin-top: 140px;
	}
	#section_manga .list h3 {
		position: absolute;
		left: 50%;
		top: -40px;
		transform: translateX(-50%);
	}
	#section_manga .list h3+p {
		text-align: center;
		font-size: 22px;
		line-height: calc(36 / 22);
	}

	#section_manga .contributor {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin-top: 30px;
		font-size: 20px;
	}

	#section_manga .contributor img {
		margin-right: 8px;
	}

	#section_manga .list figure,
	#section_manga .equipment {
		width: 620px;
		margin: 35px auto 0;
	}

	#section_manga .equipment>p {
		font-size: 22px;
		line-height: 1;
	}
	#section_manga .equipment ul {
		margin-top: 20px;
	}
	#section_manga .equipment li {
		position: relative;
		padding-left: 30px;
		color: var(--c-text-blue);
		font-size: 18px;
		line-height: 2;
	}
	#section_manga .equipment li::before {
		content: '';
		position: absolute;
		left: 0;
		top: 3;
		z-index: 1;
		width: 15px;
		height: 2em;
		background: url(../img/icon_electric.svg) 0 50% no-repeat;
	}

	#section_manga .btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 376px;
		height: 74px;
		margin: 30px auto 0;
		border: 2px solid #000;
		border-radius: 37px;
		background: #fff;
		color: var(--c-text);
		font-size: 22px;
	}


/* ----------------------------------------
	section_idea
---------------------------------------- */

	#section_idea .copy {
		text-align: center;
		color: var(--c-blue);
		font-size: 26px;
		line-height: calc(36 / 26);
	}

	#section_idea .list {
		position: relative;
		z-index: 1;
		margin-top: 150px;
	}
	#section_idea .list::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: -30px;
		bottom: 0;
		border: solid;
		border-width: 0 2px 2px;
		border-radius: 0 0 10px 10px;
		z-index: 1;
		transition: .5s background-color;
	}

	#section_idea .list[data-current='life']::before,
	#section_idea .list[data-current='life'] h3 {
		background-color: var(--c-light-green);
	}

	#section_idea .list[data-current='work']::before,
	#section_idea .list[data-current='work'] h3 {
		background-color: var(--c-green);
	}

	#section_idea .list[data-current='hobby']::before,
	#section_idea .list[data-current='hobby'] h3 {
		background-color: var(--c-yellow);
	}

	#section_idea .list_nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		z-index: 2;
	}

	#section_idea .list_nav li,
	#section_idea h3 {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: 328px;
		height: 86px;
		border-radius: 10px;
		border: 2px solid;
		transform: translateY(-100%);
	}

	#section_idea .list_nav li {
		background: var(--c-gray);
		transition: .5s;
		transition-property: visibility, opacity;
	}

	#section_idea .list_nav .work,
	#section_idea .work h3 {
		left: 326px;
	}

	#section_idea .list_nav .hobby,
	#section_idea .hobby h3 {
		left: auto;
		right: 0;
	}

	#section_idea [data-current='life'] .list_nav .life,
	#section_idea [data-current='work'] .list_nav .work,
	#section_idea [data-current='hobby'] .list_nav .hobby {
		visibility: hidden;
		opacity: 0;
		transition-duration: .3s;
		transition-delay: .1s;
	}

	#section_idea .nav,
	#section_idea h3 {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#section_idea .nav {
		height: 100%;
	}
	#section_idea .nav:hover {
		opacity: 1;
	}

	#section_idea .nav svg,
	#section_idea h3 svg {
		height: 48px;
		fill: #fff;
		transition: .3s fill;
	}

	#section_idea .life .nav:hover svg,
	#section_idea .life h3 svg {
		fill: var(--c-yellow);
	}

	#section_idea .work .nav:hover svg,
	#section_idea .work h3 svg {
		fill: var(--c-light-green);
	}

	#section_idea .hobby .nav:hover svg,
	#section_idea .hobby h3 svg {
		fill: var(--c-green);
	}

	#section_idea .list_inner {
		position: relative;
		z-index: 1;
	}

	#section_idea .list .block {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1;
	}

	#section_idea [data-current='life'] .block.life,
	#section_idea [data-current='work'] .block.work,
	#section_idea [data-current='hobby'] .block.hobby {
		position: relative;
		z-index: 2;
	}

	#section_idea h3 {
		clip-path: polygon(0 0, 100% 0, 100% 76px, 0 76px);
		transition: .5s background-color;
	}

	#section_idea .block .contents {
		visibility: hidden;
		opacity: 0;
		position: relative;
		z-index: 1;
		padding: 65px 0 75px;
		border-radius: 0 0 10px 10px;
		transition: .5s;
		transition-property: visibility, opacity;
	}

	#section_idea [data-current='life'] .life .contents,
	#section_idea [data-current='work'] .work .contents,
	#section_idea [data-current='hobby'] .hobby .contents {
		visibility: visible;
		opacity: 1;
	}

	#section_idea .block ul {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -36px -46px 33px;
	}
	#section_idea .block li {
		box-sizing: border-box;
		width: 280px;
		height: 150px;
		margin: 0 36px 46px 0;
		padding: 14px 20px 0;
		border: 2px solid;
		background: url(../img/idea_list_line_pc.svg) 50% 53px / 240px no-repeat,
			url(../img/idea_list_line_pc.svg) 50% 94px / 240px no-repeat #fff;
		font-size: 20px;
		line-height: 41px;
	}
	#section_idea .block li span {
		color: var(--c-text-blue);
	}


/* ----------------------------------------
	section_movie
---------------------------------------- */

	#section_movie h2 {
		margin-bottom: 100px;
	}

	#section_movie .block {
		padding: 48px 98px;
		border: 2px solid #000;
		border-radius: 10px;
		background: var(--c-light-green);
	}

	#section_movie .block+.block {
		margin-top: 140px;
	}

	#section_movie h3 {
		width: 620px;
		margin: auto;
		padding-bottom: 23px;
		background: url(../img/movie_copy_line_pc.svg) 0 100% / 100% no-repeat;
		text-align: center;
		color: var(--c-green);
		font-size: 26px;
	}

	#section_movie h3+p {
		margin-top: 20px;
		text-align: center;
	}

	#section_movie .list {
		display: flex;
		justify-content: space-between;
		margin-top: 45px;
	}
	#section_movie .list>li {
		position: relative;
		width: 340px;
	}

	#section_movie .title_note {
		position: absolute;
		left: 50%;
		margin-top: -7px;
		transform: translateX(-50%);
	}

	#section_movie .movie,
	#section_movie .comingsoon {
		margin: 40px auto 0;
	}
	#section_movie .movie {
		position: relative;
		width: 333px;
		cursor: pointer;
	}
	#section_movie .movie iframe {
		display: block;
		position: relative;
		z-index: 1;
		width: 100%;
		height: auto;
		aspect-ratio: 595 / 1057;
		pointer-events: none;
	}

	#section_movie .btn_sound {
		position: absolute;
		left: 10px;
		bottom: 10px;
		z-index: 1;
		width: 42px;
		height: 42px;
		background: url(../img/ico_audio_on.png) 50% 50% / contain no-repeat;
		filter: drop-shadow(0px 2px 3px rgba(0,0,0,.8));
		cursor: pointer;
	}

	#section_movie .btn_sound.on {
		background-image:url(../img/ico_audio_off.png);
	}

	#section_movie .note {
		margin: 10px -20px 0;
		text-align: center;
		font-size: 13px;
		line-height: calc(19 / 13);
	}

	#section_movie .comingsoon {
		width: 218px;
	}


/* ----------------------------------------
	btn_pagetop
---------------------------------------- */

	#btn_pagetop {
		visibility: hidden;
		opacity: 0;
		position: fixed;
		right: 30px;
		bottom: 88px;
		z-index: 2;
		transition: .5s;
		transition-property: visibility, opacity;
	}

	#btn_pagetop.is-visible {
		visibility: visible;
		opacity: 1;
	}

	#btn_pagetop.is-edge {
		position: absolute;
		bottom: auto;
		margin-top: -30px;
		transform: translateY(-100%);
	}

	#btn_pagetop a {
		transition: .2s;
	}
	#btn_pagetop a:hover {
		opacity: .7;
	}
	#btn_pagetop img {
		display: block;
	}


/* ----------------------------------------
	section_bnr
---------------------------------------- */

	#section_bnr li {
		margin: auto;
	}
	#section_bnr a {
		display: block;
	}

	#section_bnr .website {
		width: 514px;
	}
	#section_bnr .website p {
		margin-bottom: 25px;
		text-align: center;
	}
	#section_bnr .website a {
		border: 1px solid #707070;
	}

	#section_bnr .estimate {
		width: 320px;
		margin-top: 240px;
	}


/* ----------------------------------------
	section_caution
---------------------------------------- */

	#section_caution {
		padding-bottom: 140px;
		font-size: 14px;
		line-height: (24 / 14);
	}


/* ----------------------------------------
	movie_modal
---------------------------------------- */

	#movie_modal {
		width: 100%;
		height: 100%;
		text-align: center;
		white-space: nowrap;
	}
	#movie_modal::after,
	#movie_modal_inner {
		display: inline-block;
		vertical-align: middle;
	}
	#movie_modal::after {
		content: '';
		width: 0;
		height: 100%;
	}

	#movie_modal_inner {
		position: relative;
		width: 90%;
		max-width: 340px;
		max-height: 100%;
		aspect-ratio: 595 / 1057;
	}

	#movie_modal_data {
		position: relative;
		width: 100%;
		height: 100%;
	}
	#movie_modal_data iframe {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	#movie_modal .movie_btn_close {
		left: auto;
		right: 20px;
		width: 50px;
		height: 50px;
		background-image: url(../img/parts_modal_close.png);
		background-size: contain;
	}

	#movie_modal .movie_overlay {
		background: rgba(0,0,0,.9)
	}
}