@charset "UTF-8";

/* **************************************************************************************************************
******************************************** Basic Layout and Style ******************************************
************************************************************************************************************** */

/* --------------- COMMON SETTINGS --------------- */
.contents {/* ---> Watch both PC Display and Mobile Only */
	background: #ffffff;
	font-family: 'メイリオ', Meiryo, Verdana, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif;
}

a {
	text-decoration: none;
	transition: all .2s ease-out;
}

a:hover,
a:active {
	text-decoration: none;
	color: #ff9024;
}


/* BASIC PARTS */
section {
	margin: 100px auto;
}

.container {
	display: block;
	position: relative;
	width: 100%;
	max-width: 1050px;
	margin: 0 auto;
}

.heading {
	display: block;
	width: 100%;
	margin: 0 0 30px;
}

.article {
	display: block;
	position: relative;
	width: 100%;
	max-width: 1000px;
	padding: 0 15px;
	margin: 0 auto;
}

.catch-text {
	display: block;
	font-size: 1.8rem;
	line-height: 1.3;
	color: #949494;
	letter-spacing: 6px;
	padding: 5px 45px;
	margin: 0;
}

.main-heading {
	display: block;
	width: 100%;
	border-top: 1px #b6b6b6 solid;
	font-size: 4rem;
	line-height: 1.5;
	color: #6a6a6a;
	padding: 5px 45px;
	margin: 0;
}

.sub-heading {
	font-size: 2rem;
	line-height: 1.5;
	font-weight: bold;
	color: #666666;
	padding: 0;
	margin: 0 0 30px;
}

.text-box {
	display: block;
	padding: 0;
	margin: 0 auto 30px;
}

.main-text {
	font-size: 1.8rem;
	line-height: 1.8;
	padding: 0;
	margin: 0 0 1em;
}

.sub-text {
	font-size: 1.4rem;
	line-height: 1.6;
	color: #666666;
	padding: 0;
	margin: 0 0 1em;
}

.img-box {
	display: block;
	max-width: 800px;
	padding: 0;
	margin: 0 auto 30px;
}

.img-box img {
	display: block;
	border-radius: 5px;
	margin: 0 auto;
}

figure {
	display: table;
	padding: 0;
	margin: 0 auto;
}

figcaption {
	display: table-caption;
	caption-side: bottom;
	font-size: 1.4rem;
	line-height: 1.6;
	color: #bbbbbb;
	padding: 5px;
	margin: 0;
}


/* --------------- CONTENTS SETTINGS --------------- */
/* Image + Text BOX */
.img-text-box {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 0 15px;
	margin: 30px auto;
}

.img-text-box .img-box {
	max-width: 500px;
	max-width: 51.547%;
	margin: 0 30px 0 0;
	flex-shrink: 0;
}

.img-text-box .text-box {
	margin: 0;
}

.img-text-box figcaption {
	font-size: 1.4rem;
}

.img-text-box .sub-heading {
	color: #6a6a6a;
	text-align: center;
}

.img-text-box .main-text {
	font-size: 1.6rem;
	color: #666666;
}


/* FLEX 3 BOX LIST */
.flex-list3 {
	display: block;
	width: 100%;
	padding: 0;
	margin: 30px auto;
}

.flex-list3 .flex-list {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	align-content: stretch;
}

.flex-list3 .flex-list-item {
	display: block;
	max-width: 310px;
	border: none;
	border-radius: 5px;
	color: #666666;
	padding: 0;
	margin: 0 auto;
	overflow: hidden;
}

.flex-list3 .flex-list-item + .flex-list-item {
	margin-left: 10px;
}

.flex-list3 .flex-list-item .flex-list-item-inner {
	padding: 10px 15px;
}

.flex-list3 .flex-list-item a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	transition: all .2s ease-out;
}
.flex-list3 .flex-list-item a:hover,
.flex-list3 .flex-list-item a:active {
	background: #2c7a96;
	color: #ffffff;
}

.flex-list3 .sub-heading {
	display: block;
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.3;
	color: #333333;
	padding: 0;
	margin: 0 auto 15px;
}

.flex-list3 img {
	display: block;
	width: 100%;
	border-radius: 5px;
	margin: 0 auto;
	transition: all .2s ease-out;
}
.flex-list3 a:hover img,
.flex-list3 a:active img {
	transform: scale(1.12, 1.1);
}

.flex-list3 .main-text {
	font-size: 1.4rem;
	padding: 0;
	margin: 15px auto 0;
}


/* FLEX 4 BOX LIST */
.flex-list4 {
	display: block;
	width: 100%;
	padding: 0;
	margin: 30px auto;
}

.flex-list4 .flex-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	align-content: stretch;
}

.flex-list4 .flex-list-item {
	display: block;
	max-width: 220px;
	background: #ffffff;
	border: none;
	border-radius: 5px;
	color: #666666;
	padding: 0;
	margin: 0 auto;
	overflow: hidden;
}

.flex-list4 .flex-list-item + .flex-list-item {
	margin-left: 20px;
}

.flex-list4 .flex-list-item a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	transition: all .2s ease-out;
}
.flex-list4 .flex-list-item a:hover,
.flex-list4 .flex-list-item a:active {
	background: #2c7a96;
	color: #ffffff;
}

.flex-list4 .sub-heading {
	display: block;
	font-size: 1.6rem;
	line-height: 1.3;
	color: #949494;
	padding: 10px;
	margin: 5px auto;
}

.flex-list4 img {
	display: block;
	width: 100%;
	margin: 0 auto;
	transition: all .2s ease-out;
	transform-origin: bottom;
}
.flex-list4 a:hover img,
.flex-list4 a:active img {
	transform: scale(1.1, 1.1);
	transform-origin: bottom;
}

.flex-list4 .main-text {
	font-size: 1.4rem;
	line-height: 1.5;
	padding: 10px;
}


/* LINK BUTTON BOX */
.button-box {
	display: block;
	width: 100%;
	text-align: center;
	padding: 0;
	margin: 50px auto 30px;
}

.button-box a {/* ---> Watch PC Display Only */
	display: block;
	max-width: 435px;
	padding: 0 5px 5px 0;
	margin: auto;
}

.button-box .link-button {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	background: #444444;
	border-radius: 8px;
	font-size: 1.6rem;
	line-height: 1.3;
	color: #ffffff;
	text-align: center;
	vertical-align: middle;
	padding: 1em;
	margin: 0 auto;
	box-shadow: 2px 2px 4px rgba(100, 100, 100, 0.3);
	transition: all .2s ease-out;
}
.button-box .link-button:hover,
.button-box .link-button:active {
	background: #ff9024;
}
.button-box .link-button:active {
	position: relative;
	top: 2px;
	left: 2px;
	box-shadow: 0 0 4px rgba(100, 100, 100, 0.3);
}
.button-box .link-button.arrow {
	padding: 1em 2em 1em 1em;
}
.button-box .link-button.arrow::after {
	font-family: "Font Awesome 5 Free";
	content: "\f054";
	font-weight: 900;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	right: 1em;
}



/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ Setting only PC ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */
@media screen and (min-width: 768px) {
	.displayPC {
		display: block;
	}
	.displaySP {
		display: none;
	}

	/* --------------- CONTENTS SETTINGS for PC Display Only --------------- */
	/* OVERWRITE COMMON SETTINGS */
	.contents {/* OVERWRITE common.css */
		width: 100%;
		padding: 60px 0 0;
	}

}



/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ Setting only Mobile ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */
@media screen and (max-width: 767px) {
	.displayPC {
		display: none;
	}
	.displaySP {
		display: block;
	}


	/* --------------- COMMON SETTINGS for mobile --------------- */
	/* BASIC PARTS for mobile */
	section {
		margin: 60px auto;
	}

	.heading {
		margin: 0 0 15px;
	}

	.article {
		padding: 0;
	}

	.catch-text {
		font-size: 1.4rem;
		letter-spacing: 3px;
		padding: 5px 10px;
	}

	.main-heading {
		font-size: 2.6rem;
		padding: 5px 10px;
	}

	.sub-heading {
		font-size: 1.8rem;
		margin: 0 10px 20px;
	}

	.text-box {
		margin: 0 auto 20px;
	}

	.main-text {
		font-size: 1.6rem;
		padding: 0 10px;
	}

	.sub-text {
		font-size: 1.3rem;
		padding: 0 10px;
	}

	.img-box {
		width: 100%;
		margin: 0 auto 20px;
	}

	.img-box img {
		width: 100%;
		border-radius: 0;
	}

	figcaption {
		font-size: 1rem;
	}


	/* --------------- CONTENTS SETTINGS for mobile --------------- */
	/* Image + Text BOX for mobile */
	.img-text-box {
		display: block;
		padding: 0 10px;
	}

	.img-text-box .img-box {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}

	.img-text-box .img-box img {
		border-radius: 5px;
	}

	.img-text-box .text-box {
		margin: 20px 0;
	}

	.img-text-box figcaption {
		font-size: 1rem;
	}

	.img-text-box .sub-heading {
		text-align: left;
	}

	.img-text-box .main-text {
		font-size: 1.4rem;
	}


	/* FLEX 3 BOX LIST for mobile */
	.flex-list3 {
		padding: 0 10px;
	}

	.flex-list3 .flex-list {
		display: block;
	}

	.flex-list3 .flex-list-item {
		width: 100%;
		max-width: 500px;
	}

	.flex-list3 .flex-list-item + .flex-list-item {
		margin: 20px auto 0;
	}

	.flex-list3 .sub-heading {
		line-height: 1.5;
	}

	.flex-list3 img {
		max-width: 400px;
	}


	/* FLEX 4 BOX LIST for mobile */
	.flex-list4 {
		padding: 0 10px;
	}

	.flex-list4 .flex-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-content: stretch;
	}

	.flex-list4 .flex-list-item {
		display: block;
		width: 46%;
		max-width: 220px;
	}

	.flex-list4 .flex-list-item:nth-child(n + 3) {
		margin-top: 20px;
	}

	.flex-list4 .flex-list-item + .flex-list-item {
		margin-left: auto;
	}

	.flex-list4 .sub-heading {
		font-size: 1.4rem;
	}

	.flex-list4 .main-text {
		font-size: 1.2rem;
		padding: 0 10px 10px;
	}


	/* LINK BUTTON BOX for mobile */
	.button-box {
		padding: 0 10px;
		margin: 40px auto;
	}

	.button-box .link-button {
		font-size: 1.8rem;
		padding: 1em 0.5em;
	}


	/* OVERWRITE COMMON SETTINGS */
	.contents {/* OVERWRITE common.css */
		width: 100%;
		padding: 52px 0 0;
	}

}



/* **************************************************************************************************************
************************************************ Preset Classes **********************************************
************************************************************************************************************** */

/* BACKGROUND COLOR */
.bg-white { background-color: #ffffff !important; }
.bg-thin { background-color: #fafafa !important; }
.bg-pare { background-color: #e9e9e9 !important; }
.bg-light { background-color: #b6b6b6 !important; }
.bg-middle { background-color: #949494 !important; }
.bg-deep { background-color: #6a6a6a !important; }
.bg-link { background-color: #2c7a96 !important; }
.bg-link-active { background-color: #ff9024 !important; }
.bg-orange { background-color: #ff9024 !important; }
.bg-yellow { background-color: #ffda4a !important; }
.bg-blue { background-color: #09b9f5 !important; }
.bg-thinblue { background-color: #f3f9ff !important; }
.bg-lightblue { background-color: #caebff !important; }
.bg-deepblue { background-color: #2e96d2 !important; }
.bg-brown { background-color: #62533f !important; }
.bg-thingray { background-color: #efefef !important; }
.bg-lightgray { background-color: #cccccc !important; }
.bg-middlegray { background-color: #999999 !important; }
.bg-deepgray { background-color: #444444 !important; }


/* TEXT COLOR */
.text-333 { color: #333333 !important; }
.text-666 { color: #666666 !important; }
.text-white { color: #ffffff !important; }
.text-thin { color: #fafafa !important; }
.text-pare { color: #e9e9e9 !important; }
.text-light { color: #b6b6b6 !important; }
.text-middle { color: #949494 !important; }
.text-deep { color: #6a6a6a !important; }
.text-link { color: #2c7a96 !important; }
.text-link-active { color: #ff9024 !important; }
.text-logo-black { color: #000000 !important; }
.text-orange { color: #ff9024 !important; }
.text-yellow { color: #ffda4a !important; }
.text-blue { color: #09b9f5 !important; }
.text-thinblue { color: #f3f9ff !important; }
.text-lightblue { color: #caebff !important; }
.text-deepblue { color: #2e96d2 !important; }
.text-brown { color: #62533f !important; }
.text-thingray { color: #efefef !important; }
.text-lightgray { color: #cccccc !important; }
.text-middlegray { color: #999999 !important; }
.text-deepgray { color: #444444 !important; }

/* BORDER COLOR */
.border-white { border: 1px #ffffff solid !important; }
.border-thin { border: 1px #fafafa solid !important; }
.border-pare { border: 1px #e9e9e9 solid !important; }
.border-light { border: 1px #b6b6b6 solid !important; }
.border-middle { border: 1px #949494 solid !important; }
.border-deep { border: 1px #6a6a6a solid !important; }
.border-link { border: 1px #2c7a96 solid !important; }
.border-link-active { border: 1px #ff9024 solid !important; }
.border-logo-black { border: 1px #000000 solid !important; }
.border-orange { border: 1px #ff9024 solid !important; }
.border-yellow { border: 1px #ffda4a solid !important; }
.border-blue { border: 1px #09b9f5 solid !important; }
.border-thinblue { border: 1px #f3f9ff solid !important; }
.border-lightblue { border: 1px #caebff solid !important; }
.border-deepblue { border: 1px #2e96d2 solid !important; }
.border-brown { border: 1px #62533f solid !important; }
.border-thingray { border: 1px #efefef solid !important; }
.border-lightgray { border: 1px #cccccc solid !important; }
.border-middlegray { border: 1px #999999 solid !important; }
.border-deepgray { border: 1px #444444 solid !important; }

/* TEXT DECORATION */
.text-shadow { text-shadow: 1.5px 1.5px 3px rgba(100, 100, 100, 0.5); }
.text-border { text-shadow: 1px 1px #333333, -1px -1px #333333, -1px 1px #333333, 1px -1px #333333, 1px 0 #333333, -1px 0 #333333, 0 1px #333333, 0 -1px #333333; }
.text-bold {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
}
.text-large { font-size: 1.2em; }
.text-small { font-size: 0.85em; }

/* OTHER DECORATION */
.box-shadow { box-shadow: 2px 2px 4px rgba(100, 100, 100, 0.3); }
.box-shadow-light { box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.16); }
.line-marker {
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 59%, rgba(255, 243, 98, 0.9) 60%);
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 59%, rgba(255, 243, 98, 0.9) 60%);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 59%, rgba(255, 243, 98, 0.9) 60%);
}
.spacer { height: 30px; margin: 0; border: none; background: none; }
.spacer-min { height: 15px; margin: 0; border: none; background: none; }


/* ＊＊＊＊＊　Ripple Effect　＊＊＊＊＊ */
.ripple {
position: relative;
overflow: hidden;
}

.ripple .rp-effect {
position: absolute;
border-radius: 50%;
opacity: 0.35;
transform: scale(0);
background: #FFF;
animation: ripple 400ms;
pointer-events: none;
}

@-webkit-keyframes ripple {
	to {
	opacity: 0;
	transform: scale(2.0);
	}
}

@keyframes ripple {
	to {
	opacity: 0;
	transform: scale(2.0);
	}
}



/* **************************************************************************************************************
******************************************** Styles for BRAND GUIDE ******************************************
************************************************************************************************************** */

/* ＊＊＊＊＊　GROBAL SETTING　＊＊＊＊＊ */
.webfont1-regular {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
}
.webfont1-bold {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
}
.webfont1-black {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 900;
}
.webfont2 {
	font-family: 'Alata', sans-serif;
	font-weight: 400;
}

.flexing {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

section {
	position: relative;
	margin: 0 auto 150px;
}
section:last-of-type {
	margin: 0 auto;
}

/* ＊＊＊＊＊　HEADER SETTING　＊＊＊＊＊ */
#headerBody.gnav::after {
	content: none;
}

.require-button a {
	display: block;
	position: relative;
	background: #09b9f5;
	border-radius: 5px;
	color: #ffffff;
	border: 1px rgba(255, 255, 255, 0) solid;
	padding: 12px 10px;
}
.require-button a:hover,
.require-button a:active {
	background: #CAEBFF;
	color: #1C7CB4;
	border: 1px #A8D5F1 solid;
}

/* ＊＊＊＊＊　MAIN TITLE SETTING　＊＊＊＊＊ */
#brandTitle {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 75vw;
	max-height: 500px;
	background: transparent;
}
#brandTitle::before {
	content: "";
	width: 100%;
	height: 75vw;
	max-height: 500px;
	position: fixed;
	top: 60px;
	left: 0;
	background: url('/asset/diy/images/ad/bg-main.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
}

#brandTitle .container,
#brandTitle .container-inner,
#brandTitle #main-title {
	width: 100%;
	height: 75vw;
	max-height: 500px;
	position: relative;
	margin: 0 auto;
}

#main-title-inner {
	width: 100%;
	max-width: 1050px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	padding: 3% 2% 1.5%;
}
#main-title-inner::after {
	content: none;
}

#title-logo {
	font-size: 7rem;
	line-height: 1;
	text-shadow: 2px 2px #ffffff, -2px -2px #ffffff, -2px 2px #ffffff, 2px -2px #ffffff, 2px 0 #ffffff, -2px 0 #ffffff, 0 2px #ffffff, 0 -2px #ffffff;
}

#title-description {
	position: relative;
	display: inline-block;
	width: auto;
	max-width: 510px;
	font-size: 1.6rem;
	line-height: 1.5;
	background: rgba(9, 185, 245, 0.6);
	text-align: left;
	padding: 8px;
	margin: 0;
}

#title-desc-medal {
	display: block;
	position: absolute;
	bottom: 2%;
	right: 1.5%;
}

#title-medal {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 230px;
	height: 230px;
	background: rgba(9, 185, 245, 0.6);
	text-align: center;
	border-radius: 50%;
}

.title-medal-box {
	padding: 0 8px;
}

.text1 {
	font-size: 2rem;
	line-height: 1.5;
}
.text2 {
	font-size: 2.6rem;
	line-height: 1.15;
	margin: 5px auto;
}
.text2.letter-space {
	letter-spacing: 0;
}
.text2 .size-down {
	font-size: 0.75em;
	margin: auto 0.05em;
}
.min-text {
	font-size: 1.2rem;
	line-height: 1.2;
}

/* ＊＊＊＊＊　CONTENTS FIELD SETTING　＊＊＊＊＊ */
#brandGuideContents {
	position: relative;
	width: 100%;
	background: #fff;
	padding: 0;
	margin: 0;
}

.col2 h2 {
	font-size: 3.5em;
	line-height: 1.2;
	text-align: center;
	letter-spacing: 8px;
	margin: 0 auto 50px;
}

h2 .sub-category-jp {
	display: block;
	font-size: 1.2rem;
	line-height: 1;
	padding: 0.3em 0.5em 0.5em;
}

.flexing li {
	margin: 10px;
	flex: auto;
}

.main-contents {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
}

.contents-block {
	position: relative;
	display: block;
	margin: 0 auto 100px;
}
.contents-block:last-child {
	margin-bottom: 0;
}

.heading-text {
	display: table;
	font-size: 3.5rem;
	line-height: 1.4;
	margin: 0 auto;
}
.heading-text.web-summery {
	font-size: 2.2em;
	text-align: right;
}
.heading-text.web-summery .letter-space {
	letter-spacing: -2px;
}

.contents-block h3 {
	margin-bottom: 30px;
	text-align: center;
}

.center-block {
	display: table !important;
	margin: auto;
}

/* ＊＊＊＊＊　BRAND INFORMATION SECTION SETTING　＊＊＊＊＊ */
.socialgraph {
	display: flex;
	justify-content: space-around;
	flex-wrap: nowrap;
	margin-bottom: 30px;
}

.socialgraph li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 18%;
	max-width: 180px;
	text-align: center;
	border-radius: 5px;
	padding: 10px;
	margin: 0.7em auto;
}

.socialgraph .social-card {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.socialgraph .social-card a {
	display: block;
}

.socialgraph .amount {
	display: block;
	font-size: 2.2em;
	line-height: 1.6;
	letter-spacing: 0px;
	margin: 0.1em auto;
}

.socialgraph .unit {
	display: block;
	font-size: 1.1em;
	line-height: 1.6;
	font-weight: bold;
	margin: -0.5em auto 0;
}

#brandGuide .flexing {
	align-items: flex-start;
}

#brandGuide .center-block {
	text-align: center;
}

#brandMedia .flex-list3 .flex-list-item {
	text-align: center;
}
#brandMedia .flex-list3 .flex-list-item a:hover, .flex-list3 .flex-list-item a:active {
	background: none;
}

#brandMedia .flex-list-item .sub-heading-caption {
	font-size: 1em;
	line-height: 1;
}

#brandMedia .flex-list-item .sub-heading  {
	font-size: 1.8em;
	letter-spacing: 0.12em;
	line-height: 1.8;
}

#brandMedia .flex-list-item .main-text {
	font-size: 1em;
}

.bio-card {
	display: block;
	width: 95%;
	max-width: 400px;
	position: relative;
	border-radius: 15px;
	text-align: center;
	padding: 0.5em 1em;
	margin: 30px auto;
}

.bio-items {
	padding: 0;
	margin: 0;
}
.bio-items::after {
	content: none;
}

.bio-item {
	padding: 1em;
}
.bio-item + .bio-item {
	border-top: 2px #ffffff solid;
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.bio-icon {
	width: 2.9em;
}

.bio-heading {
	display: block;
	font-size: 1.5em;
	line-height: 1.2;
}

/* ＊＊＊＊＊　MEDIA FEATURES SECTION SETTING　＊＊＊＊＊ */
#mediaFeatures .lead-text {
	display: table;
	line-height: 1.5;
	margin: -20px auto 50px;
}

.tile-list {
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	flex-wrap: nowrap;
	margin: 15px auto;
}

.tile-list li {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 28%;
	text-align: center;
	border-radius: 5px;
	padding: 2em 1em;
	margin: 5px 10px;
}

.tile-item {
	display: block;
	width: 100%;
	font-size: 1em;
	line-height: 1.6;
	color: #ffffff;
	padding: 1px;
}

.large-text {
	display: block;
	font-size: 1.6em;
	line-height: 1.4;
	margin: auto;
}

.tile-item .annotation-text {
	display: table;
	font-size: 1.2rem;
	color: #ffffff;
	text-align: left;
	margin: 1em auto 0;
}

#clientMessage {
	display: block;
	overflow: hidden;
	width: 100%;
	min-height: 500px;
	background: url('/asset/diy/images/ad/bg-message.png') no-repeat;
	background-position: center;
	background-size: cover;
	padding: 15px;
	margin: 0 auto 60px;
}

#clientMessage li + li {
	margin-top: 50px;
}

#clientMessage li h4 {
	font-size: 1.8rem;
	line-height: 1em;
}
#clientMessage li h4::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background: #09b9f5;
	vertical-align: middle;
	margin-right: 0.5em;
}

#clientMessage li p {
	font-size: 3.45rem;
	line-height: 1.4;
}

#clientMessage .client-marker {
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 59%, rgba(9, 185, 245, 0.15) 60%);
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 59%, rgba(9, 185, 245, 0.15) 60%);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 59%, rgba(9, 185, 245, 0.15) 60%);
}

#mediaFeatures .contents-block:last-child h3 {
	font-size: 2.7rem;
}

/* ＊＊＊＊＊　USER PROFILE SECTION SETTING　＊＊＊＊＊ */
.profile-column {
	max-width: 850px;
	margin: 50px auto;
	padding: 0;
}
.profile-column:nth-of-type(2n) {
	flex-direction: row-reverse;
}

.profile-column .img-box {
	margin: 0;
	width: 35%;
	max-width: 250px;
}

.profile-column .img-box img {
	border-radius: 0;
}

.profile-column .text-box {
	margin: 0 auto;
}

.profile-column .sub-heading {
	font-size: 1.8rem;
	line-height: 1.6;
	margin: 15px 0 25px;
}

.profile-column ul {
	margin: 15px 0;
}

.profile-column li {
	font-size: 1.4rem;
	line-height: 1.4;
}

.interest-detail::after {
	content: none;
}

.interest-rankings {
	width: 35%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.interest-rankings:nth-of-type(2) {
	order: 2;
}

.interest-picture {
	display: block;
	width: 30%;
	max-width: 250px;
	flex-shrink: 0;
}

.interest-ranking {
	display: block;
	position: relative;
	background: #09b9f5;
	color: #ffffff;
	border-radius: 10px;
	padding: 1.5em 2em;
	margin: 4em 0;
}
.interest-ranking::before {
	content: '';
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 1em 2.5em;
}
#rank1.interest-ranking::before {
	position: absolute;
	bottom: 4em;
	right: -5em;
	border-color: transparent transparent transparent #09b9f5;
}
#rank2.interest-ranking::before {
	position: absolute;
	top: 4em;
	right: -5em;
	border-color: transparent transparent transparent #09b9f5;
}
#rank3.interest-ranking::before {
	position: absolute;
	bottom: 4em;
	left: -5em;
	border-color: transparent #09b9f5 transparent transparent;
}
#rank4.interest-ranking::before {
	position: absolute;
	top: 4em;
	left: -5em;
	border-color: transparent #09b9f5 transparent transparent;
}

.ranking-header {
	display: block;
	font-size: 2.4em;
	line-height: 1.2;
}

.ranking-description {
	display: block;
	font-size: 1.5em;
	line-height: 1.8;
	text-align: center;
	margin: 1em auto;
}

.ranking-annotation {
	display: block;
	font-size: 1.2em;
	line-height: 1.5;
	text-align: right;
}

.annotation-text.center-block {
	margin: 50px auto;
}

/* ＊＊＊＊＊　TOPICS SECTION SETTING　＊＊＊＊＊ */
.topics-list li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border-bottom: 1px rgba(98, 83, 63, 0.2) dotted;
	font-size: 1.6rem;
	line-height: 1.4;
	padding: 0 1em 1.5em;
	margin: 0 auto 1.5em;
}

.topics-item {
	display: block;
	flex-shrink: 0;
	font-size: 0.9em;
	line-height: 1.5;
	margin-right: 1.5em;
}

.update {
	color: #09b9f5;
}
.update::before {
	font-family: "Font Awesome 5 Free";
	content: "\f017";
	font-weight: 900;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-size: 1.4em;
	color: #09b9f5;
	margin-right: 0.5em;
	vertical-align: middle;
}

/* ＊＊＊＊＊　INFORMATION SECTION SETTING　＊＊＊＊＊ */
#information {
	display: block;
	padding: 0 0 50px;
}

#information h2 {
	font-size: 3.5em;
	line-height: 1.6;
	text-align: center;
	margin: 0 auto 50px;
}

#information .center-block {
	margin: 1em auto;
}

#information .button-box a {
	width: 100%;
	max-width: 100%;
	padding: 0 10px 10px;
}

#information .button-box .link-button {
	background: #caebff;
	border: 1px #a8d5f1 solid;
	border-radius: 0;
	color: #1c7cb4;
	font-size: 1.2em;
	box-shadow: 2px 2px 4px rgba(100, 100, 100, 0.2);
}
#information .button-box .link-button:hover, .button-box .link-button:active {
	color: #ffffff;
	background: #1c7cb4;
}

.flex-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
}

.adinfo-form,
.adinfo-list {
	flex: auto;
	width: 50%;
}

.adinfo-form {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 30px 0 0;
}

.adinfo-item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	font-size: 1.6rem;
	line-height: 1.6;
}
.adinfo-item::after {
	content: none;
}

.adinfo-item h4 {
	font-size: 1.9em;
	line-height: 1.2;
	margin-bottom: 0.8em;
	padding: 0 10px;
}

.adinfo-item p {
	padding: 0 10px;
}

.adinfo-item .button-box {
	margin: 15px auto 0;
}

.adinfo-list {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: stretch;
	flex-wrap: nowrap;
}

.adinfo-list li {
	flex: auto;
	background: #b0dcf6;
	text-align: center;
	padding: 10px 15px;
	margin: 2px;
	transition: all .2s ease-out;
}
.adinfo-list li:hover,
.adinfo-list li:active {
	background: #efefef;
}

.adinfo-block {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	font-size: 1.6rem;
	line-height: 1.4;
	color: #ffffff;
}

.adinfo-list li:hover .adinfo-block,
.adinfo-list li:active .adinfo-block {
	color: #1c7cb4;
}

/* ＊＊＊＊＊　ANOTHER COMMON SETTING　＊＊＊＊＊ */
.annotation-text {
	display: inline-block;
	font-size: 1.1rem;
	font-weight: normal;
	line-height: 1.6;
	color: #909090;
}

.button-box a + a {
	margin-top: 20px;
}

.button-heading {
	font-size: 2.5rem;
	line-height: 1.8;
}

.no-break {
	white-space: nowrap;
	display: inline-block;
}

.force-break {
	word-break: break-all;
}



@media screen and (min-width: 768px) {
	/* ＊＊＊＊＊　GROBAL SETTING for PC only　＊＊＊＊＊ */
	.article {
		max-width: 1030px;
	}

	/* ＊＊＊＊＊　BRAND INFORMATION SECTION SETTING for PC only　＊＊＊＊＊ */
	section#brandGuide {
		margin-bottom: 100px;
	}

	/* ＊＊＊＊＊　USER PROFILE SECTION SETTING for PC only　＊＊＊＊＊ */
	#userProfile .img-box figure {
		display: block;
	}

	/* ＊＊＊＊＊　INFORMATION SECTION SETTING for PC only　＊＊＊＊＊ */
	#information .information-text .button-box {
		margin: 0 auto 50px;
	}

	#information .adinfo-item .button-box a {
		padding: 0 5px 5px 0;
	}

	/* ＊＊＊＊＊　ANOTHER COMMON SETTING for PC only　＊＊＊＊＊ */
	.br-insert-pc::before {
		content: "\A";
		white-space: pre;
	}

}



@media screen and (max-width: 767px) {
	/* ＊＊＊＊＊　GROBAL SETTING for MOBILE　＊＊＊＊＊ */
	section {
		margin: 0 auto 80px;
	}

	/* ＊＊＊＊＊　HEADER SETTING for MOBILE　＊＊＊＊＊ */
	.header-body {
		display: inline-block;
		position: absolute;
		top: 8px;
		right: 60px;
	}

	.require-button a {
		display: inline-block;
		position: relative;
		font-size: 1.2rem;
		padding: 8px 10px;
	}

	/* ＊＊＊＊＊　MAIN TITLE SETTING for MOBILE　＊＊＊＊＊ */
	#brandTitle {
		align-items: flex-start;
		height: auto;
		min-height: 120vw;
		max-height: none;
		text-align: center;
	}
	#brandTitle::before {
		content: "";
		width: 100%;
		height: auto;
		min-height: 120vw;
		max-height: none;
		position: fixed;
		top: 52px;
		left: 0;
		background: url('/asset/diy/images/ad/bg-main-s.jpg') no-repeat;
		background-position: center center;
		background-size: cover;
	}

	#brandTitle .container,
	#brandTitle .container-inner,
	#brandTitle #main-title {
		height: auto;
		min-height: 120vw;
		max-height: 500px;
	}

	#main-title {
		width: 100%;
	}

	#main-title-inner {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	#title-logo {
		font-size: 13.5vw;
	}

	#title-description {
		background: none;
		font-size: 1.4rem;
		padding: 1em;
		text-shadow: 1px 1px 1px rgba(125, 208, 242, 0.7), -1px -1px 1px rgba(125, 208, 242, 0.7), -1px 1px 1px rgba(125, 208, 242, 0.7), 1px -1px 1px rgba(125, 208, 242, 0.7), 1px 0 1px rgba(125, 208, 242, 0.7), -1px 0 1px rgba(125, 208, 242, 0.7), 0 1px 1px rgba(125, 208, 242, 0.7), 0 -1px 1px rgba(125, 208, 242, 0.7);
	}

	#title-medal {
		width: 180px;
		height: 180px;
	}

	.text1 {
		font-size: 1.4rem;
	}
	.text2 {
		font-size: 1.9rem;
	}
	.min-text {
		font-size: 1rem;
	}


	/* ＊＊＊＊＊　CONTENTS FIELD SETTING for MOBILE　＊＊＊＊＊ */
	.col2 h2 {
		font-size: 11vw;
		line-height: 1.2;
		letter-spacing: 0;
		padding-top: 10px;
		margin: 0 auto 30px;
	}

	h2 .h2-heading {
		margin-left: 5px;
	}

	.contents-block {
		margin: 0 auto 50px;
	}
	.contents-block:last-child {
		margin: 0 auto;
	}

	.heading-text {
		font-size: 6vw;
	}
	.heading-text.web-summery {
		font-size: 1.8em;
	}

	.watch-mediaguide .flexing {
		display: block;
	}

	/* ＊＊＊＊＊　BRAND INFORMATION SECTION SETTING for MOBILE　＊＊＊＊＊ */
	#socialGraphs {
		padding: 0 10px;
	}

	#socialGraphs .heading-text {
		font-size: 7.5vw;
		line-height: 1.2;
		margin: 0 auto;
	}

	.socialgraph {
		flex-wrap: wrap;
	}

	.socialgraph li {
		display: block;
		width: 33%;
		max-width: initial;
		text-align: center;
		padding: 1em 0 0;
		margin: 0.5em auto;
	}

	.socialgraph .amount {
		font-size: 5vw;
		line-height: 1.4;
	}

	.socialgraph .unit {
		font-size: 1.1rem;
		line-height: 1.2;
		margin: 0 auto;
	}

	#brandMedia .flex-list-item .img-box {
		max-width: 300px;
	}

	.bio-card {
		max-width: none;
		padding: 5px 10px;
		margin: 15px auto;
	}

	.bio-item {
		padding: 10px;
	}

	#brandMedia .flex-list-item .button-box {
		padding: 0;
	}
	#brandMedia .flex-list-item:last-of-type .button-box {
		padding: 0;
		margin-bottom: 0;
	}

	/* ＊＊＊＊＊　MEDIA FEATURES SECTION SETTING for MOBILE　＊＊＊＊＊ */
	#mediaFeatures .lead-text {
		margin: -20px auto 20px;
	}

	.tile-list {
		flex-wrap: wrap;
	}

	.tile-list li {
		width: 90%;
		padding: 0.5em;
		margin: 5px auto;
	}

	.tile-item {
		font-size: 4.5vw;
		padding: 10px 0;
	}

	.large-text {
		font-size: 8vw;
		line-height: 1.2;
	}

	.tile-item .annotation-text {
		font-size: 1rem;
	}

	#mediaFeatures .contents-block:last-child h3 {
		font-size: 5vw;
	}

	#clientMessage {
		min-height: 350px;
		margin: 0 auto 30px;
	}

	#clientMessage li + li {
		margin-top: 30px;
	}

	#clientMessage li h4 {
		font-size: 1.6rem;
	}

	#clientMessage li p {
		font-size: 2.2rem;
	}

	/* ＊＊＊＊＊　USER PROFILE SECTION SETTING for MOBILE　＊＊＊＊＊ */
	#userImage,
	#userInterest,
	#userResidence {
		padding: 0 10px;
	}

	.profile-column {
		width: 100%;
		max-width: 400px;
		margin: 20px auto;
		padding: 0;
	}

	.profile-column.flexing {
		display: block;
		position: relative;
		overflow: hidden;
	}

	.profile-column .img-box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		padding: 0;
		margin: 0;
		filter: brightness(0.5);
	}

	.profile-column .text-box {
		position: relative;
		color: #ffffff;
	}

	.profile-column .sub-heading {
		font-size: 4.9vw;
		color: #ffffff !important;
		margin: 10px 10px 25px;
	}

	.profile-column li {
		font-size: 1.1rem;
	}

	.interest-detail.flexing {
		width: 100%;
	}

	.interest-rankings {
		width: 65%;
		max-width: 350px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.interest-rankings:nth-of-type(2) {
		order: 0;
		width: 0;
		display: none;
	}

	.interest-picture {
		width: 33%;
		max-width: 250px;
	}

	.interest-ranking {
		padding: 3vw;
		margin: 5px 0;
	}
	.interest-ranking::before {
		content: none;
	}

	.ranking-header {
		font-size: 4vw;
	}

	.ranking-description {
		font-size: 2.5vw;
		margin: 0.5em auto;
	}

	.ranking-annotation {
		font-size: 2vw;
	}

	.annotation-text.center-block {
		margin: 30px auto;
	}

	/* ＊＊＊＊＊　TOPICS SECTION SETTING for MOBILE　＊＊＊＊＊ */
	.topics-list li {
		display: block;
		font-size: 1.4rem;
		padding: 0 10px 1.5em;
	}

	/* ＊＊＊＊＊　INFORMATION SECTION SETTING for MOBILE　＊＊＊＊＊ */
	#information {
		padding: 0;
	}

	#information h2 {
		font-size: 2.5em;
		margin: 0 auto 25px;
	}

	#information .button-box {
		margin: 20px auto 40px;
		padding: 0;
	}

	.flex-info {
		display: block;
		padding: 15px 0 50px;
	}

	.adinfo-form {
		width: 100%;
		padding: 0;
	}

	.adinfo-item h4 {
		font-size: 6vw;
		padding: 0 15px;
	}

	.adinfo-item p {
		font-size: 1.4rem;
		padding: 0 15px;
	}

	.adinfo-list {
		width: 100%;
		padding: 0 10px;
	}

	/* ＊＊＊＊＊　ANOTHER COMMON SETTING for MOBILE　＊＊＊＊＊ */
	.annotation-text {
		font-size: 1rem;
		margin: auto;
	}

	.button-box {
		margin: 20px auto 30px;
	}

	.button-box a {
		margin: auto;
	}

	.button-box .link-button {
		font-size: 1em;
	}

	.button-heading {
		font-size: 2rem;
	}

	.br-insert-sp::before {
		content: "\A";
		white-space: pre;
	}

}




/* **************************************************************************************************************
******************************************** BUGFIX for IE, IE-Edge ******************************************
************************************************************************************************************** */

/* ＊＊＊＊＊　BUGFIX for Ie-Edge　＊＊＊＊＊ */
@supports (-ms-ime-align: auto) {

}

/* ＊＊＊＊＊　IE bug fix　＊＊＊＊＊ */
_:-ms-input-placeholder, :root #main-title-inner {
	width: 100vw;
	max-width: 1050px;
}

_:-ms-input-placeholder, :root #brandTitle .container {
	display: table-cell;
}

_:-ms-input-placeholder, :root #clientMessage li p {
	font-size: 3.4rem;
}