@charset "utf-8";

@media screen and (max-width : 768px){
	#contents_area {
		position: relative;
		color: #000;
		font-size: calc(16 / 375 * 100vw);
		line-height: 1.5;
		font-feature-settings: 'palt' 1;
	}

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

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

	.section {
		position: relative;
		z-index: 1;
		margin: calc(180 / 375 * 100vw) auto 0;
	}
	.section:first-child {
		margin-top: 0;
	}

	.section img {
		display: block;
		width: 100%;
	}
	.section sup {
		vertical-align: top;
		font-size: 75%;
	}

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

	.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: calc(125 / 375 * 100vw);
		margin-bottom: calc(40 / 375 * 100vw);
		background: var(--c-blue);
		border: solid #000;
		border-width: 2px 0;
	}
	.section h2 img {
		height: calc(75 / 375 * 100vw);
	}

	.section_inner {
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		width: calc(315 / 375 * 100vw);
		margin: auto;
	}

	.section .num {
		width: calc(240 / 375 * 100vw);
		margin: calc(-83 / 375 * 100vw) auto calc(23 / 375 * 100vw);
	}


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

	#section_title {
		margin: 0 calc(-30 / 375 * 100vw);
		padding-top: calc(7.5 / 375 * 100vw);
		text-align: center;
	}

	#section_title .heading {
		margin-top: calc(25 / 375 * 100vw);
		padding: calc(36 / 375 * 100vw) 0;
		border: 2px solid #000;
		border-radius: calc(10 / 375 * 100vw);
		background: var(--c-light-green);
	}

	#section_title .copy {
		color: var(--c-text-blue);
		font-size: calc(20 / 375 * 100vw);
		line-height: calc(40 / 375 * 100vw);
	}
	#section_title .copy span {
		letter-spacing: .06em;
		font-size: calc(22 / 375 * 100vw);
	}

	#section_title .keyword {
		display: inline-block;
		width: calc(154 / 375 * 100vw);
		margin-right: calc(6 / 375 * 100vw);
		vertical-align: text-bottom;
	}

	#section_title .text {
		margin-top: calc(40 / 375 * 100vw);
		font-size: calc(14 / 375 * 100vw);
		line-height: calc(26 / 14);
	}

	#section_title .nav {
		margin-top: calc(15 / 375 * 100vw);
	}
	#section_title .nav li+li{
		margin-top: calc(10 / 375 * 100vw);
	}
	#section_title .nav a {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		height: calc(60 / 375 * 100vw);
		border: 2px solid #000;
		border-radius: calc(10 / 375 * 100vw);
		background: var(--c-green);
	}
	#section_title .nav a::after {
		content: '';
		position: absolute;
		right: calc(24 / 375 * 100vw);
		top: 50%;
		border: solid transparent;
		border-width: calc(17.4 / 375 * 100vw) calc(10 / 375 * 100vw) 0;
		border-top-color: var(--c-yellow);
		transform: translateY(-50%);
	}
	#section_title .nav a img {
		width: auto;
		filter: drop-shadow(0 3px 50px rgba(0,0,0,.16));
	}

	#section_title .nav .manga img {
		height: calc(24 / 375 * 100vw);
	}

	#section_title .nav .idea img {
		height: calc(25 / 375 * 100vw);
	}

	#section_title .nav .movie img {
		height: calc(21 / 375 * 100vw);
	}


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

	#section_manga .copy {
		margin: 0 calc(-2 / 375 * 100vw);
		padding-bottom: calc(20 / 375 * 100vw);
		background: url(../img/manga_copy_line_sp.svg) 50% 100% / 100% no-repeat;
		text-align: center;
		color: var(--c-blue);
		font-size: calc(20 / 375 * 100vw);
	}

	#section_manga .author {
		position: relative;
		margin-top: calc(45 / 375 * 100vw);
		padding-top: calc(45 / 375 * 100vw);
	}

	#section_manga .author figure {
		position: absolute;
		left: calc(8 / 375 * 100vw);
		top: 0;
		width: calc(146 / 375 * 100vw);
	}

	#section_manga .name,
	#section_manga .sns {
		margin-left: calc(176 / 375 * 100vw);
	}
	#section_manga .name {
		font-size: calc(18 / 375 * 100vw);
		line-height: 1;
	}

	#section_manga .sns {
		display: flex;
		margin-top: calc(30 / 375 * 100vw);
	}
	#section_manga .sns li {
		width: calc(39 / 375 * 100vw);
		margin-right: calc(30 / 375 * 100vw);
	}

	#section_manga .text {
		margin-top: calc(39 / 375 * 100vw);
	}

	#section_manga .comingsoon {
		margin-top: calc(27 / 375 * 100vw);
	}

	#section_manga .list {
		margin-top: calc(60 / 375 * 100vw);
	}
	#section_manga .list>li {
		position: relative;
		padding: calc(33 / 375 * 100vw) 0 calc(42 / 375 * 100vw);
		border: 2px solid #000;
		border-radius: calc(10 / 375 * 100vw);
		background: var(--c-light-green);
	}
	#section_manga .list>li+li {
		margin-top: calc(90 / 375 * 100vw);
	}
	#section_manga .list h3 {
		position: absolute;
		left: 50%;
		top: calc(-27 / 375 * 100vw);
		width: calc(293 / 375 * 100vw);
		transform: translateX(-50%);
	}
	#section_manga .list h3+p {
		text-align: center;
		font-size: calc(14 / 375 * 100vw);
		line-height: calc(22 / 14);
	}

	#section_manga .contributor {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin-top: calc(25 / 375 * 100vw);
	}
	#section_manga .contributor img {
		width: auto;
		height: calc(27 / 375 * 100vw);
		margin-right: calc(6 / 375 * 100vw);
	}

	#section_manga .list figure {
		width: calc(260 / 375 * 100vw);
		margin: calc(15 / 375 * 100vw) auto 0;
	}

	#section_manga .equipment {
		margin: calc(15 / 375 * 100vw) 0 0 calc(35 / 375 * 100vw);
	}
	#section_manga .equipment>p {
		line-height: 1;
	}
	#section_manga .equipment ul {
		margin-top: calc(15 / 375 * 100vw);
	}
	#section_manga .equipment li {
		position: relative;
		padding-left: calc(20 / 375 * 100vw);
		color: var(--c-text-blue);
		font-size: calc(14 / 375 * 100vw);
		line-height: calc(20 / 14);
	}
	#section_manga .equipment li+li {
		margin-top: calc(6 / 375 * 100vw);
	}
	#section_manga .equipment li::before {
		content: '';
		position: absolute;
		left: 0;
		top: calc(-2 / 375 * 100vw);
		z-index: 1;
		width: calc(12 / 375 * 100vw);
		height: calc(24 / 375 * 100vw);
		background: url(../img/icon_electric.svg) 0 0 / contain no-repeat;
	}

	#section_manga .btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc(260 / 375 * 100vw);
		height: calc(51 / 375 * 100vw);
		margin: calc(25 / 375 * 100vw) auto 0;
		border: 2px solid #000;
		border-radius: calc(26 / 375 * 100vw);
		background: #fff;
		color: var(--c-text);
		font-size: calc(14 / 375 * 100vw);
	}



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

	#section_idea .copy {
		text-align: center;
		color: var(--c-blue);
		font-size: calc(20 / 375 * 100vw);
	}

	#section_idea .list {
		position: relative;
		z-index: 1;
		margin-top: calc(100 / 375 * 100vw);
	}
	#section_idea .list::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: calc(-18 / 375 * 100vw);
		bottom: 0;
		border: solid;
		border-width: 0 1px 1px;
		border-radius: 0 0 calc(5 / 375 * 100vw) calc(5 / 375 * 100vw);
		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: calc(106 / 375 * 100vw);
		height: calc(42 / 375 * 100vw);
		border-radius: calc(5 / 375 * 100vw);
		border: 1px 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 {
		width: calc(105 / 375 * 100vw);
		left: calc(106 / 375 * 100vw - 1px);
	}

	#section_idea .list_nav .hobby,
	#section_idea .hobby h3 {
		left: calc(210 / 375 * 100vw - 1px);
	}

	#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: calc(23 / 375 * 100vw);
		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% calc(32 / 375 * 100vw), 0 calc(32 / 375 * 100vw));
		transition: .5s background-color;
	}

	#section_idea .block .contents {
		visibility: hidden;
		opacity: 0;
		position: relative;
		z-index: 1;
		padding: calc(20 / 375 * 100vw) 0 calc(25 / 375 * 100vw);
		border-radius: 0 0 calc(5 / 375 * 100vw) calc(5 / 375 * 100vw);
		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 calc(-18 / 375 * 100vw) calc(-20 / 375 * 100vw) calc(14 / 375 * 100vw);
	}
	#section_idea .block li {
		box-sizing: border-box;
		width: calc(135 / 375 * 100vw);
		height: calc(136 / 375 * 100vw);
		margin: 0 calc(18 / 375 * 100vw) calc(20 / 375 * 100vw) 0;
		padding: calc(6 / 375 * 100vw) calc(6 / 375 * 100vw) calc(6 / 375 * 100vw) calc(11 / 375 * 100vw);
		border: 1px solid;
		background: url(../img/idea_list_bg_sp.svg) 50% 0 / 100% #fff;
		background-clip: border-box;
		font-size: calc(14 / 375 * 100vw);
		line-height: calc(26 / 14);
	}
	#section_idea .block li:nth-child(n+7) {
		display: none;
	}

	#section_idea .more li:nth-child(n+7) {
		display: block;
	}

	#section_idea .block li span {
		color: var(--c-text-blue);
	}

	#section_idea .block .btn {
		display: block;
		width: calc(44 / 375 * 100vw);
		margin: calc(20 / 375 * 100vw) auto 0;
	}
	#section_idea .block .btn svg {
		display: block;
		width: 100%;
	}
	#section_idea .block .btn use {
		transition: .3s opacity;
	}

	#section_idea .block .btn .close,
	#section_idea .more .btn .more {
		opacity: 0;
	}
	#section_idea .more .btn .close {
		opacity: 1;
	}

	#section_idea .life .btn .more.base,
	#section_idea .life .btn .close.icon {
		fill: var(--c-yellow);
	}
	#section_idea .life .btn .more.icon,
	#section_idea .life .btn .close.base {
		fill: var(--c-green);
	}

	#section_idea .work .btn .more.base,
	#section_idea .work .btn .close.icon {
		fill: var(--c-light-green);
	}
	#section_idea .work .btn .more.icon,
	#section_idea .work .btn .close.base {
		fill: var(--c-yellow);
	}

	#section_idea .hobby .btn .more.base,
	#section_idea .hobby .btn .close.icon {
		fill: var(--c-green);
	}
	#section_idea .hobby .btn .more.icon,
	#section_idea .hobby .btn .close.base {
		fill: var(--c-light-green);
	}


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

	#section_movie h2 {
		margin-bottom: calc(64 / 375 * 100vw);
	}

	#section_movie .block {
		padding: calc(28 / 375 * 100vw) 0 calc(48 / 375 * 100vw);
		border: 2px solid #000;
		border-radius: calc(10 / 375 * 100vw);
		background: var(--c-light-green);
	}

	#section_movie .block+.block {
		margin-top: calc(90 / 375 * 100vw);
	}
	
	#section_movie h3 {
		width: calc(251 / 375 * 100vw);
		margin: auto;
		padding-bottom: calc(15 / 375 * 100vw);
		background: url(../img/movie_copy_line_sp.svg) 0 100% / 100% no-repeat;
		text-align: center;
		color: var(--c-green);
		font-size: calc(20 / 375 * 100vw);
	}
	
	#section_movie h3+p {
		margin-top: calc(22 / 375 * 100vw);
		text-align: center;
		font-size: calc(14 / 375 * 100vw);
		line-height: calc(22 / 14);
	}

	#section_movie .list {
		width: calc(233 / 375 * 100vw);
		margin: calc(36 / 375 * 100vw) auto 0;
	}
	#section_movie .list>li+li {
		margin-top: calc(50 / 375 * 100vw);
	}

	#section_movie .title_note {
		position: absolute;
		left: 50%;
		width: calc(147 / 375 * 100vw);
		margin-top: calc(-4 / 375 * 100vw);
		transform: translateX(-50%);
	}

	#section_movie .note {
		line-height: 1;
	}

	#section_movie .movie,
	#section_movie .comingsoon {
		margin: calc(30 / 375 * 100vw) auto 0;
	}
	#section_movie .movie {
		position: relative;
		width: calc(228 / 375 * 100vw);
	}
	#section_movie .movie iframe {
		display: block;
		position: relative;
		z-index: 1;
		width: 100%;
		height: auto;
		aspect-ratio: 595 / 1057;
	}

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

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

	#section_movie .note {
		margin: calc(10 / 375 * 100vw) calc(-36 / 375 * 100vw) 0;
		text-align: center;
		font-size: calc(11 / 375 * 100vw);
		line-height: calc(17 / 11);
	}

	#section_movie .comingsoon {
		width: calc(124.5 / 375 * 100vw);
	}


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

	#btn_pagetop {
		visibility: hidden;
		opacity: 0;
		position: fixed;
		right: calc(11 / 375 * 100vw);
		bottom: calc(15 / 375 * 100vw + 67.5px);
		z-index: 2;
		width: calc(36 / 375 * 100vw);
		transition: .5s;
		transition-property: visibility, opacity;
	}

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

	#btn_pagetop.is-edge {
		position: absolute;
		bottom: auto;
		margin-top: calc(-30 / 375 * 100vw);
		transform: translateY(-100%);
	}

	#btn_pagetop img {
		display: block;
		width: 100%;
	}


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

	#section_bnr {
		margin-top: calc(60 / 375 * 100vw);
	}
	#section_bnr li {
		margin: auto;
	}
	#section_bnr a {
		display: block;
	}

	#section_bnr .website {
		width: calc(316 / 375 * 100vw);
	}
	#section_bnr .website p {
		margin-bottom: calc(20 / 375 * 100vw);
		text-align: center;
	}
	#section_bnr .website a {
		border: 1px solid #707070;
	}

	#section_bnr .estimate {
		width: calc(240 / 375 * 100vw);
		margin-top: calc(90 / 375 * 100vw);
	}


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

	#section_caution {
		margin-top: calc(60 / 375 * 100vw);
		padding-bottom: calc(108 / 375 * 100vw);
		font-size: calc(14 / 375 * 100vw);
		line-height: (24 / 14);
	}


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

	#movie_modal {
		position: fixed;
		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: 10px;
		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)
	}
}