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

/* リセット */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
-webkit-text-size-adjust: 100%;
}
body {
	-ms-overflow-style:none;
}
body::-webkit-scrollbar {
    display:none;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
*{
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
cursor: pointer;	
}

img {
	vertical-align: bottom;
}

/* FONTの指定について ===============*/

/*
font-family: 'Hind', sans-serif;
font-weight: 500; Medium

font-family: 'Kiwi Maru', serif;
font-weight: 500; Medium

font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 700; Bold

font-family: 'Noto Sans JP', sans-serif;
font-weight: 100; Thin
font-weight: 400; Regular
font-weight: 500; Medium
font-weight: 700; Bold
font-weight: 900; Black
*/



/* コモン ===============*/

br.sp {
	display: none;
}

br.pc {
	display: inline;
}

@media screen and (max-width: 1024px) {
	br.sp {
		display: inline;
	}
	
	br.pc {
		display: none;
	}
}



/* メニュー ===============*/

nav.globalMenuSp {
	padding: 70px 0 0;
    position: fixed;
    z-index: 999999;
    top: 0;
    right: -1px;
    text-align: center;
    transform: translateX(100%);
    width: 53%;
    height: 100vh;
    transition: 0.3s;
	background: white;
	overflow: scroll;
}


/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    height: 100vh;
    opacity: 1;
    transition: 0.3s;
    transform: translateX(0%);
}

nav.globalMenuSp h1 {
	font-size: 24px;
	line-height: 1.3;
	font-family: "Noto Sans JP";
    font-weight: 400;
	margin-bottom: 25px;
}

nav.globalMenuSp dl {
	font-size: 0;
	text-align: left;
}

nav.globalMenuSp dl dt {
	padding-left: 7.5%;
	padding-top: 15px;
}

nav.globalMenuSp dl dt span {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 10px;
	margin-bottom: 8px;
}

nav.globalMenuSp dl dt span:nth-of-type(1) {
	background: #EF908F;
}

nav.globalMenuSp dl dt span:nth-of-type(2) {
	background: #F4E790;
}

nav.globalMenuSp dl dt span:nth-of-type(3) {
	background: #A0D4CA;
}

nav.globalMenuSp dl dd {
	font-size: 17px;
	font-family: "Noto Sans JP";
    font-weight: 500;
	padding-bottom: 15px;
	padding-left: 7.5%;
	border-bottom: 1px solid #9FA0A0;
}








/* グローバルメニュー外観 */

div.navToggle {
    display: none;
    position: fixed;
    top: 20px;
    right: 3%;
    font-size: 12px;
    font-family: "Noto Sans JP";
    font-weight: 400;
    z-index: 999999;
    cursor: pointer;
    transition: 0.5s;
    text-align: center;
}

div.navToggle span {
    display: block;
    width: 32px;
    margin: 8px auto 0 auto;
    border-bottom: solid 2px black;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}


div.navToggle.active span:nth-child(1),
div.navToggle.active span:nth-child(2),
div.navToggle.active span:nth-child(3) {
	border-bottom: solid 2px black;
}



/* 1番目のspanをマイナス45度に 白に変更 */
.navToggle.active span:nth-child(1) {
    position: relative;
    top: 11px;
    left: 0px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
	border-bottom: solid 2px black;
}

/* 2番目のspanを白に変更 消す */
 .navToggle.active span:nth-child(2) {
 	border-bottom: solid 2px black;	
    opacity: 0;
 }
 
 
/* 3番目のspanを45度に 白に変更 */
.navToggle.active span:nth-child(3) {
	position: relative;
    top: -9px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
	border-bottom: solid 2px black;
}

/* 4番目のspanを4白に変更 */
.navToggle.active span:nth-child(4)  {
	color: black;
}


@media screen and (max-width: 1024px) {
	div.navToggle {
		display: block;
	}
}





/* 資料請求・無料見積もり依頼 */

div.ask {
	text-align: center;
}

div.ask h4 {
	font-size: 18px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	line-height: 1.6;
	margin-bottom: 10px;
}

div.ask a {
	font-size: 23px;
	width: 357px;
	height: 56px;
	line-height: 56px;
	display: block;
	margin: 0 auto;
	border-radius: 15px;
	background: #C81D1D;
	color: white;
	box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.6);
	transition: 0.3s;
	font-family: 'Kiwi Maru', serif;
	font-weight: 500;
}

div.ask a span {
	margin-right: 7px;
}

div.ask a:hover {
	transform: scale(1.1);
	transition: 0.3s;
}

@media screen and (max-width: 1024px) {
	div.ask h4 {
		font-size: 16px;
		margin-bottom: 8px;
		font-weight: 400;
	}
	
	div.ask a {
		font-size: 22px;
		width: 90%;
		max-width: 450px;
	}
	
	div.ask a:hover {
		transform: initial;
		transition: initial;
	}
}





/* セクションタイトル */

div.sec_title {
	font-size: 0;
	text-align: center;
}

div.sec_title span.square_01,
div.sec_title span.square_02,
div.sec_title span.square_03 {
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-bottom: 17px;
}

div.sec_title span.square_01 {
	background: #EF908F;
}

div.sec_title span.square_02 {
	background: #F4E790;
}

div.sec_title span.square_03 {
	background: #A0D4CA;
}

div.sec_title span.square_01,
div.sec_title span.square_02 {
	margin-right: 20px;
}

div.sec_title h2 {
	font-size: 37px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	color: #C81D1D;
}

div.sec_title h2 span.youtube {
	color: #FF0000;
	font-weight: 700;
	font-size: 57px;
    line-height: 1.3;
	display: inline;
	font-family: 'Noto Sans JP', sans-serif;
	position: relative;
	top: 7px;
	margin-right: 15px;
}


div.sec_title h2 span {
	color: black;
	display: block;
	font-size: 23px;
	font-family: 'Hind', sans-serif;
	font-weight: 500;
	margin-top: 15px;
}

@media screen and (max-width: 1024px) {
	
	div.sec_title h2 {
		font-size: 30px;
		line-height: 1.3;
	}
	
	div.sec_title h2 span.youtube {
		margin-right: 0;
		position: initial;
	}
	
	div.sec_title h2 span {
		margin-top: 7px;
		font-size: 18px;
	}
	
}



/* メリット */

div.merit {
	min-width: 273px;
	width: 23%;
	background-image: url(../img/bg_merit.svg);
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 12px;
	text-align: center;
	
}

div.merit div {
	width: calc(100% - 12px);
	background: white;
	padding-top: 10px;
	padding-bottom: 25px;
}

div.merit div h3 {
	font-size: 24px;
	border: 5px solid black;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	min-width: 180px;
	width: 69%;
	height: 53px;
	line-height: 41px;
	margin: 0 auto 15px;
}

div.merit div img {
	margin-bottom: 15px;
}

div.merit div p {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
}

div.merit div p.letter_space {
	letter-spacing: -2px;
}

div.merit div p.letter_space span.space {
	letter-spacing: -9px;
}

div.merit div p span {
	color: #C81D1D;
}


@media screen and (max-width: 1024px) {
	
	div.merit {
		min-width: initial;
		width: 100%;
		margin: 0 auto;
		max-width: 450px;
	}
	
	div.merit div {
		padding-bottom: 20px;
	}
	
	div.merit div h3 {
		font-size: 21px;
		height: 51px;
		line-height: 40px;
		width: 170px;
    	min-width: 170px;
	}
	
	div.merit div img {
		width: 85%;
	}
	
	div.merit div p {
		font-size: 17px;
	}
}






/* 強み */


div.strength {
	min-width: 351px;
	width: 30%;
}

div.strength div.head {
	text-align: center;
	width: 100%;
	min-height: 96px;
	display: flex;
	padding: 0 10px;
	background: #C81D1D;
	border-radius: 5px;
	margin-bottom: 20px;
	position: relative;
}

div.strength div.head:before {
	content: "";
	display: block;
	width: 48px;
	height: 32px;
	background-image: url(../img/img_strength_01.svg);
	position: absolute;
	bottom: -32px;
	left: 50%;
	transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

div.strength div.head h3 {
	font-size: 29px;
	line-height: 1.3;
	width: 100%;
	margin: auto;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	color: white;
}


div.strength div.strength_text {
	height: 312px;
	padding: 40px 0;
	background: white;
	min-width: 351px;
}

div.strength p {
	font-size: 22px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	line-height: 1.8;
	margin: 0 auto;
	width: 310px;
	/*padding: 40px 23px;
	background: white;
	height: 312px;*/
}



@media screen and (max-width: 1024px) {
	
	div.strength {
		width: 90%;
		min-width: initial;
		margin: 0 auto;
		max-width: 450px;
	}
	
	div.strength div.head {
		min-height: 70px;
		margin-bottom: 15px;
	}

	div.strength div.head h3 {
		font-size: 20px;
	}
	
	div.strength div.strength_text {
		min-width: initial;
		height: initial;
		padding: 25px 0;
	}
	
	div.strength p {
		font-size: 18px;
		width: 90%;
	}
	
	div.strength div.head:before {
		width: 40px;
		height: 27px;
		bottom: -27px;
	}

}








/* 実例・事例動画 */

div.movie {
	width: 32%;
}

div.movie a.gallery div.img {
	width: 100%;
	height: calc(28vw * 0.75);
	background: black;
	position: relative;
	margin-bottom: 10px;
}

div.movie a.gallery div.img div.mask {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	overflow: hidden;
}

div.movie a.gallery div.img div.mask img.thumbnail {
	display: block;
	width: 100%;
	transition: 0.3s;
}

div.movie a.gallery div.img img.start {
	width: 21%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	overflow: hidden;
	transition: 0.3s;
}

div.movie a.gallery h3 {
	font-size: 23px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	margin-bottom: 15px;
	line-height: 1.3;
}

div.movie a.gallery p {
	font-size: 17px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	line-height: 1.3;
}

div.movie:hover > a.gallery div.img div.mask img.thumbnail {
	transform: scale(1.1);
	transition: 0.3s;
}

div.movie:hover > a.gallery div.img img.start {
	opacity: 0.8;
	transition: 0.3s;
}

div.movie:hover > a.gallery h3 {
	opacity: 0.8;
	transition: 0.3s;
}

div.movie:hover > a.gallery p {
	opacity: 0.8;
	transition: 0.3s;
}


@media screen and (max-width: 1024px) {
	div.movie {
		width: 100%;
		margin: 0 auto;
	}
	
	div.movie a.gallery div.img {
		height: calc(90vw * 0.75);
	}
	
	div.movie a.gallery h3 {
		font-size: 20px;
		margin-bottom: 8px;
	}
	
	div.movie a.gallery p {
		font-size: 16px;
	}
	
	div.movie:hover > a.gallery div.img div.mask img.thumbnail {
		transform: scale(1.0);
	}

	div.movie:hover > a.gallery div.img img.start {
		opacity: 1.0;
	}

	div.movie:hover > a.gallery h3 {
		opacity: 1.0;
	}

	div.movie:hover > a.gallery p {
		opacity: 1.0;
	}
}




/* ヘッダーロゴ */

a.header_logo {
	display: block;
	width: 235px;
}

a.header_logo img {
	transition: 0.3s;
}

a.header_logo img:hover {
	transform: scale(1.1);
	transition: 0.3s;
}

@media screen and (max-width: 1024px) {
	a.header_logo {
		width: 180px;
		margin: 0 auto;
	}
	
	a.header_logo img:hover {
		transform: scale(1.0);
	}
	
}



/* グローバルメニュー */

ul.menu_pc {
	font-size: 0;
}

ul.menu_pc li {
	font-size: 16px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	display: inline-block;
	margin-right: 32px;
	padding: 0 9px 10px;
	transition: 0.3s;
	border-bottom: 4px solid white;
}

ul.menu_pc li:last-of-type {
	margin-right: 0;
}

ul.menu_pc li:hover {
	border-bottom: 4px solid #EF908F;
	transition: 0.3s;
}

@media screen and (max-width: 1195px) {
	ul.menu_pc li {
		margin-right: 15px;
	}
}

@media screen and (max-width: 1024px) {
	ul.menu_pc {
		display: none;
	}
}



/* ファーストビュー */

h1.top_message {
	font-size: 60px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 900;
}

h1.top_message span.line {
	display: inline-block;
	padding: 10px 20px;
	background: white;
	margin-bottom: 25px;
}

h1.top_message span.line:nth-of-type(1) {
	color: #C81D1D;
}

h1.top_message span.line:last-of-type {
	margin-bottom: 0;
}

h1.top_message span.line span.youtube {
	color: #FF0000;
	font-weight: 700;
	margin-right: 3px;
}


@media screen and (max-width: 1195px){
	h1.top_message {
		font-size: 42px;
	}
	
	h1.top_message span.line {
		margin-bottom: 13px;
	}
}



@media screen and (max-width: 1024px) {
	h1.top_message {
		font-size: 42px;
	}
	
	h1.top_message span.line {
		padding: 8px 10px;
		margin-bottom: 10px;
	}
	
	h1.top_message span.line span.nallow {
		margin-left: -15px;
		transform: scale(0.85, 1);
	}
}


@media screen and (max-width: 600px) {
	h1.top_message {
		font-size: 26px;
	}
	
	h1.top_message span.line {
		padding: 8px 10px;
		    margin-bottom: 10px;
	}
}



/* 私たちについて／リード */

h3.about_message {
	text-align: center;
	font-size: 31px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	line-height: 1.8;
}

h3.about_message span {
	background:linear-gradient(transparent 70%, #EBBAAC 70%);
}

@media screen and (max-width: 1024px) {
	
	h3.about_message {
		font-size: 23px;
	}
}




/* 私たちについて／イメージ */

ul.channel {
	font-size: 0;
	width: 68.5%;
	margin: 0 auto;
}

ul.channel li {
	width: 31.5%;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 21px;
}

ul.channel li {
	margin-right: 2.75%;
}

ul.channel li:nth-of-type(3),
ul.channel li:nth-of-type(6) {
	margin-right: 0;
}

ul.channel li:nth-of-type(4),
ul.channel li:nth-of-type(5),
ul.channel li:nth-of-type(6) {
	margin-bottom: 0;
}


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

	ul.channel {
		display: none;
	}
}




/* 私たちの強み／リード */

h3.strength_read {
	font-size: 43px;
	line-height: 1.6;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	text-align: center;
}

h3.strength_read span {
	background:linear-gradient(transparent 70%, #EBBAAC 70%);
}

@media screen and (max-width: 1024px) {
	h3.strength_read {
		font-size: 23px;
	}
}


/* 私たちの強み／本文 */

p.strength_text {
	font-size: 19px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

@media screen and (max-width: 1024px) {
	p.strength_text {
		font-size: 18px;
		width: 90%;
		margin: 0 auto;
		text-align: left;
		line-height: 1.8;
		font-weight: 400;
		max-width: 450px;
	}
}


/* 簡単3STEP／見出し */

div.step_title {
	position: relative;
	width: 60%;
	margin: 0 auto;
}

div.step_title:before {
	content: "";
	display: block;
	width: calc((100% - 433px) / 2);
	border-top: 1px solid black;
	position: absolute;
	top: 20px;
	left: 15px;
}

div.step_title:after {
	content: "";
	display: block;
	width: calc((100% - 433px) / 2);
	border-top: 1px solid black;
	position: absolute;
	top: 20px;
	right: 15px;
}

div.step_title h3 {
	font-size: 28px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	text-align: center;
	letter-spacing: 3px;
}

div.step_title h3:before {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	border: 5px solid black;
	border-radius: 10px;
	position: absolute;
	top: 13px;
	left: 0;
}

div.step_title h3:after {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	border: 5px solid black;
	border-radius: 10px;
	position: absolute;
	top: 13px;
	right: 0;
}

div.step_title h3 span.line {
	background: linear-gradient(transparent 70%, #EBBAAC 70%);
}

div.step_title h3 span.line span {
	font-size: 35px;
}


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

	div.step_title {
		width: 90%;
	}
	
	div.step_title:before {
		width: calc((100% - 210px) / 2);
		top: 30px;
	}
	
	div.step_title:after {
		width: calc((100% - 210px) / 2);
		top: 30px;
	}
	
	div.step_title h3 {
		font-size: 23px;
		line-height: 1.3;
	}
	
	div.step_title h3:before {
		top: 23px;
	}
	
	div.step_title h3:after {
		top: 23px;
	}
	
	div.step_title h3 span.line span {
		font-size: 26px;
	}

}


/* 簡単3STEP／本文 */

p.step_text {
	font-size: 20px;
	line-height: 1.5;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	text-align: center;
}

@media screen and (max-width: 1024px) {
	p.step_text {
		font-size: 18px;
		width: 90%;
		margin: 0 auto;
		text-align: left;
		font-weight: 400;
		line-height: 1.8;
		max-width: 450px;
	}
}


/* フッター／メッセージ */

div.footer_message {
	position: relative;
	text-align: center;
	width: 305px;
	margin: 0 auto;
}

div.footer_message:before {
	content: "";
	display: block;
	width: 76px;
	height: 47px;
	position: absolute;
	bottom: 20px;
	left: -116px;
	background-image: url(../img/img_footer_01.svg);
}

div.footer_message:after {
	content: "";
	display: block;
	width: 76px;
	height: 47px;
	position: absolute;
	bottom: 20px;
	right: -116px;
	background-image: url(../img/img_footer_02.svg);
}

div.footer_message h1 {
	font-size: 31px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
}

div.footer_message h1 span.youtube {
	color: #FF0000;
	font-size: 65px;
	font-weight: 700;
	display: block;
	margin-bottom: 10px;
}

@media screen and (max-width: 1024px) {
	div.footer_message {
		width: 200px;
	}
	
	div.footer_message h1 {
		font-size: 22px;
	}
	
	div.footer_message h1 span.youtube {
		font-size: 44px;
		margin-bottom: 5px;
	}
	
	div.footer_message:before {
		width: 38px;
		height: 30px;
		left: -55px;
		background-repeat: no-repeat;
		bottom: 6px;
	}
	
	div.footer_message:after {
		width: 38px;
		height: 30px;
		right: -55px;
		background-repeat: no-repeat;
		bottom: 6px;
	}
	
}


/* フッター／ワオ・エージェンシー */

div.footer_wao_agency {
	text-align: center;
}

div.footer_wao_agency img {
	width: 239px;
	margin-bottom: 20px;
	transition: 0.3s;
}

div.footer_wao_agency img:hover {
	transform: scale(1.1);
	transition: 0.3s;
}

div.footer_wao_agency h3 {
	font-size: 26px;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: 700;
}

@media screen and (max-width: 1024px){
	div.footer_wao_agency img {
		width: 190px;
	}
	
	div.footer_wao_agency h3 {
		font-size: 20px;
	}
	
	div.footer_wao_agency img {
		margin-bottom: 10px;
	}
	
	div.footer_wao_agency img:hover {
		transform: scale(1.0);
	}
	
}




/* コピーライト */

div.copy_width {
	text-align: center;
	font-size: 0;
}

div.copy_width p.copy_right {
	font-size: 18px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	letter-spacing: 2px;
	display: inline-block;
	margin-right: 4px;
}

div.copy_width p.copy_right:last-of-type {
	margin-right: 0;
}


@media screen and (max-width: 1024px) {
	div.copy_width p.copy_right {
		font-size: 13px;
	}
}






/* TOPに戻る */

div.gtp {
	width: 67px;
	height: 67px;
	background-image: url(../img/top.svg);
	position: fixed;
	bottom: 140px;
	right: 48px;
	transition: 0.3s;
}

div.gtp:hover {
	transform: scale(1.1);
	transition: 0.3s;
}

@media screen and (max-width: 1024px) {
	
	div.gtp {
		right: 3%;
		bottom: 112px;
	}
	
	div.gtp:hover {
		transform: scale(1.0);
	}
}