@charset "UTF-8";
/*base*/
:root{
	--col_main: #000000;
	}
@font-face {
    font-family: FOT-TsukuMin Pro;
    src: url("../font/FOT-TsukuMinPro-RB.otf");
}

@font-face {
    font-family: YuGo-Medium-83pv-RKSJ-H;
    src: url("../font/YuGothM 2.ttc");
}

@font-face {
    font-family: "Quickpen";
    src: url("../font/Quickpen.otf");
}
*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	}

header, footer, nav, section, article {
	display:block;
	}

html{
	font-family: sans-serif;
	font-size: 100%;
	overflow-y: scroll; 
	color: var(--col_main);
	}

body{
	}


img{
	vertical-align: middle;
	border-style: none;
	width: 100%;
	user-select: none;
	}

.sp{
	display: none;
	}


/*link*/
a img {
    border-style: none;
	}

a:link{
	color: var(--col_main);
	text-decoration: none;
	}

a:active{
	text-decoration: none;
	}

a:visited{
	color: var(--col_main);
	}

a:hover{
	text-decoration: none;
	}


/*flex*/
.flex{
	display: flex;
	}

.align_items_start{
	align-items: start;
	}

.align_items_center{
	align-items: center;
	}

.justify_content_space_between{
	justify-content: space-between;
	}

.justify_content_start{
	justify-content: flex-start;
	}

.justify_content_center{
	justify-content: center;
	}

.flex_wrap{
	flex-wrap: wrap;
	}

/*grid*/
.grid_wrap{
	display: grid;
	}

/*fadein*/
.fadeUp{
	animation-name: fadeUpAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
	}

@keyframes fadeUpAnime{
	from {
	opacity: 0;
	transform: translateY(50px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
}
.fadein{
	opacity: 0;
	}

/*menu*/
.mainmenu_btn,.mainmenu_btn span{
	transition: all .4s;
	}
.mainmenu_btn{
	display: block;
	width: 38px;
	height: 20px;
	position: fixed;
	top: 41px;
	left: 56px;
	z-index: 100;
	cursor: pointer;
	}

.mainmenu_btn span{
	position: absolute;
	width: 38px;
	height: 1px;
	background-color: #ffffff;
	transition: background-color 0.3s ease;
	}

.mainmenu_btn.black span {
	background-color: #000000;
	}

.mainmenu_btn span.top {
	top: 0px;
	}
.mainmenu_btn span.middle {
	top: 10px;
	}
.mainmenu_btn span.bottom {
	bottom: 0px;
	}
.mainmenu_btn.active span{
	background-color: #000000;
	}
.mainmenu_btn.active span.top {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
	}
.mainmenu_btn.active span.middle {
	opacity: 0;
	}
.mainmenu_btn.active span.bottom {
	-webkit-transform: translateY(-10px) rotate(45deg);
	transform: translateY(-10px) rotate(45deg);
	}

.mainmenu_wrap{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background: #ffffff;
	visibility: hidden;
	opacity: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: all .4s;
	}
.mainmenu_wrap *{
	visibility: hidden;
	opacity: 0;
	}
.mainmenu_wrap.active{
	visibility: visible;
	opacity: 1;
	z-index: 10;
	}
.mainmenu_wrap.active *{
	visibility: visible;
	opacity: 1;
	}
#mainmenu{
	padding: 0 5.4vw;
	}
#mainmenu ul{
	list-style-type: none;
	}
#mainmenu ul li{
	padding-bottom: 2.7vw;
	font-size: max(1.875rem,2.7vw);
	}
#mainmenu ul li:last-of-type{
	padding-bottom: 0;
	}
#mainmenu a img{
	display: block;
	height: auto;
	}
#mainmenu a img.menu_txt_about{
	width: 8.1vw;
	}
#mainmenu a img.menu_txt_colorlineup{
	width: 16.9vw;
	}
#mainmenu a img.menu_txt_product{
	width: 10.1vw;
	}
#mainmenu a img.menu_txt_download{
	width: 13.5vw;
	}
#mainmenu a img.menu_txt_top{
	width: 5vw;
	}
#mainmenu a img.menu_txt_digitalcolorsimulation{
	width: 33.8vw;
	}
#mainmenu hr{
	width: 7.2vw;
	height: 0;
	border: 0;
	border-top: 1px solid var(--col_main);
	margin: 4.5vw 0;
	}

#bottommenu{
	position: absolute;
	bottom: 3.1vw;
	left: 5.4vw;
	}
#bottommenu ul{
	list-style-type: none;
	display: flex;
	gap: 4.5vw;
	}
#bottommenu a{
	color: #a6a5ab;
	font-size: max(0.9375rem,1.3vw);
	}

.mainmenu_wrap .img_wrap{
	display: flex;
	justify-content: flex-end;
	width: 33vw;
	height: 100vh;
	overflow: hidden;
	}
.mainmenu_wrap .img_wrap img{
	display: block;
	width: auto;
	height: 100vh;
	}

/*contents*/
main{
	}

/*fv*/
#fv{
	background: #c0bec3;
	}
/* ローディング画面 */
#loading {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #c0bec3;
	display: flex;
	align-items: center;
	justify-content: center;
	}

/* スピナー */
.spinner {
	width: 50px;
	height: 50px;
	border: 5px solid #ccc;
	border-top-color: #333;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
.slide{
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	margin: 0 auto;
	overflow: hidden;
	}
.slide .wrap{
	position: relative;
	height: 100%;
	display: flex !important;
	justify-content: center;
	}
.slide .mainimg{
	display: block;
	width: auto;
	height: 100vh;
	}
.slide .slide_01 .mainimg{
	width: auto;
	height: 110vh;
	opacity: 0;
	}
.slide .slide_01 .mainimg.animate{
	animation: slide_01 1s linear forwards;
	}
.slide .slide_04 .mainimg{
	animation: slide_04 3s linear forwards;
	}
.slide .slide_05 .mainimg{
	animation: slide_05 4s linear forwards;
	}
.slide .slide_05 h1{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 45.45vw;
	}
.slide .slide_05 .fv_logo{
	display: block;
	width: 100%;
	height: auto;
	opacity: 0;
	animation: fv_logo 2s linear forwards;
	animation-delay: 2s;
	}
@keyframes slide_01{
	0% {
		opacity: 0;
		transform: translateY(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateY(-5.4vw); 
	}
}
@keyframes slide_04{
	0% {
		transform: translateX(-1.8vw);
	}
	100% {
		transform: translateX(0); 
	}
}
@keyframes slide_05{
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.05);
	}
}
@keyframes fv_logo{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*about*/
.bg_wrap{
      transition: background-color 0.5s;
	background-color: #CDCBCF;
	}
#about{
	padding: 21vw 0 25vw;
	text-align: center;
	}
#about .about_h1{
	width: 42.72vw;
	padding-bottom: 1.27vw;
	border-bottom: 1px solid #000000;
	margin: 0 auto;
	}

#about .about_h1 img{
	display:block;
	width: 4.9vw;
	height: auto;
	margin: 0 auto;
	}

#about .about_copy_wrap{
	padding: 10vw 0 10.9vw;
	}

#about .about_copy_wrap .txt_01 img{
	display:block;
	width: 26.7vw;
	height: auto;
	margin: 0 auto;
	}
#about .about_copy_wrap .txt_02 img{
	display:block;
	width: 34.9vw;
	height: auto;
	margin: 3vw auto 0;
	}

#about .about_body_wrap .txt_01{
	font-size: clamp(1rem,1.45vw,1.5rem);
	line-height: 3.18;
	}
#about .about_body_wrap .txt_03 img{
	display:block;
	width: 37.2vw;
	height: auto;
	margin: 7.6vw auto 0;
	}
#about .about_img_01{
	display: block;
	width: 31.8vw;
	height: auto;
	margin: 10vw auto 9vw;
	}
#about .about_feature_wrap{
	width: 32.7vw;
	margin: 0 auto;
	padding: 3.6vw 0 4vw;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	}
#about .about_feature_wrap .about_img_02{
	display: block;
	width: 22vw;
	height: auto;
	margin: 0 auto 2.2vw;
	}
#about .about_feature_wrap .txt_01{
	font-size: max(0.9375rem,1.36vw);
	line-height: 2.33;
	}

/*lineup*/
#lineup{
	background: url('../img/lineup/lineup_bg.png') bottom center no-repeat;
	background-size: 100%;
	padding: 26vw 0 13.2vw;
	}

#lineup.blur {
	filter: blur(8px);
	transition: filter 0.3s ease;
	}

#lineup .lineup_title_wrap .wrap_01,#lineup .lineup_title_wrap .wrap_02{
	display: flex;
	overflow: hidden;
	margin-bottom: 1.8vw;
	}
#lineup .scroll_infinity{
	display: flex;
	list-style: none;
	padding: 0
	}
#lineup .scroll_infinity_item img{
	display: block;
	width: 26.8vw;
	height: auto;
	margin: 0 0.6vw;
	}
#lineup .lineup_title_wrap .wrap_01 .scroll_infinity{
	animation: loop_ttl_01 30s linear infinite;
	}
#lineup .lineup_title_wrap .wrap_02 .scroll_infinity{
	animation: loop_ttl_02 30s linear infinite;
	}

@keyframes loop_ttl_01 {
	0% {
		transform: translateX(0%);
		}
	100% {
		transform: translateX(-100%);
		}
}
@keyframes loop_ttl_02 {
	0% {
		transform: translateX(-100%);
		}
	100% {
		transform: translateX(0%);
		}
}

#lineup .lineup_thumb_wrap{
	margin-top: 11.3vw;
	display: flex;
	gap: 0 0.8vw;
	}

#lineup .lineup_thumb_wrap .item{
	width: calc((100% - 1.6vw) / 4);
	display: flex;
	flex-flow: column;
	}

#lineup .lineup_thumb_wrap .item a{
	display: block;
	width: 100%;
	}

#lineup .lineup_thumb_wrap .item img{
	display: block;
	width: 100%;
	height: auto;
	}

#lineup .lineup_thumb_wrap .item_01,
#lineup .lineup_thumb_wrap .item_03 {
  transform: translateY(17.2vw);
  transition: transform 0.5s ease-out;
}

#lineup .lineup_thumb_wrap .item_02,
#lineup .lineup_thumb_wrap .item_04 {
  transform: translateY(0);
  transition: transform 0.5s ease-out;
}

#lineup .lineup_anchor{
	margin: 30vw 0 27vw;
	gap: 0 4vw;
	display: flex;
	justify-content: center;
	}

#lineup .lineup_anchor a{
	display: block;
	width: 14.5vw;
	}

#lineup .lineup_anchor a img{
	display: block;
	width: 100%;
	height: auto;
	}

#lineup .lineup_item{
	width: 87.27vw;
	margin: 0 auto 1.8vw;
	padding: 9vw 7.7vw;
	background: #ffffff;
	}

#lineup .lineup_item_ttl img{
	display: block;
	width: auto;
	height: 3.1vw;
	margin: 0 auto;
	}

#lineup .lineup_item .txt_01{
	margin-top: 2.7vw;
	font-size: max(0.875rem,1.2vw);
	line-height: 1.64;
	text-align: center;
	}

#lineup .lineup_item_grid{
	margin-top: 8.6vw;
	grid-template-columns: repeat(2, 1fr);
	gap: 5.4vw 6.3vw;
	}

#lineup .lineup_item a{
	text-align: center;
	}

#lineup .lineup_item a img{
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 1.3vw;
	}
#lineup .lineup_item a .link_txt img{
	display: block;
	width: auto;
	height: 1vw;
	margin: 0 auto;
	}

#lineup .lineup_item .flex{
	margin-top: 8.6vw;
	}
#lineup .lineup_item .flex a{
	width: calc(50% - 3.15vw);
	}

#lineup a.btn_colorchart{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: max(1.125rem,1.6vw);
	width: 59vw;
	height: 5.8vw;
	margin: 13.1vw auto 0;
	background: #ffffff url('../img/icon_arrow.svg') center right 3.6vw no-repeat;
	background-size: 1vw 1.63vw;
	}

.modal_content {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	position: relative;
	z-index: 10;
	}

.modal_content.type1{
	display: flex;
	align-items: center;
	padding: 0 9vw;
	color: #ffffff;
	}
.type1_grid{
	grid-template-columns: 33.6vw 40vw;
	gap: 0 7vw;
	}

.type1_grid .img_detail_wrap{
	order: 2;
	}
.type1_grid .img_detail_wrap img{
	width: 100%;
	min-width: 40vw;
	height: auto;
	}
.type1_grid .txt_wrap{
	order: 1;
	display: flex;
	flex-flow: column;
	/*justify-content: space-between;*/
	}
.type1_grid#recipe_09 .txt_wrap{
	justify-content: flex-start;
	}

.type1_grid .shoulder{
	margin-bottom: 4vw;
	padding-bottom: 0.9vw;
	border-bottom: 1px solid #ffffff;
	}
.type1_grid .shoulder img{
	display: block;
	width: 9.3vw;
	height: auto;
	}
.type1_grid .detail_ttl{
	display: block;
	width: auto;
	height: 7.2vw;
	}
.type1_grid .detail_ttl_txt{
	margin-top: 1.8vw;
	font-size: max(0.812rem,1.18vw);
	}
.type1_grid .detail_ttl_txt.mgt0{
	margin-top: 0;
	}

.type1_grid .col_wrap{
	margin-top: 5.4vw;
	display: flex;
	flex-flow: column;
	gap: 1.5vw;
	}


.type1_grid .col{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	}
.type1_grid .col_icon{
	display: block;
	width: 2.2vw;
	height: auto;
	margin-right: 0.9vw;
	}

#recipe_09 .type1_grid .shoulder{
	margin-bottom: 2vw;
	}

#recipe_09 .type1_grid .col_wrap{
	margin-top: 2.7vw;
	}

#recipe_09 .type1_grid .mgt{
	margin-top: 5.4vw;
	}


.modal_content.type2{
	display: flex;
	align-items: center;
	}

.type2_inner{
	width: 77vw;
	background: #ffffff;
	margin: 0 auto;
	padding: 4vw 7.2vw 0.9vw;
	position: relative;
	}
.type2_grid{
	grid-template-rows: auto auto;
	gap: 3.3vw;
	}
.type2_grid .txt_wrap hgroup{
	text-align: center;
	margin-bottom: 2.1vw;
	}
.type2_grid .txt_wrap h2 img{
	display: block;
	width: auto;
	height: 2.9vw;
	margin: 0 auto;
	}
.type2_grid .txt_wrap hgroup p{
	font-size: max(0.8125rem,1.1vw);
	line-height: 1.53;
	margin-top: 0.9vw;
	}
.type2_grid .txt_wrap .txt_01{
	font-size: max(0.875rem,1.2vw);
	line-height: 1.64;
	margin-bottom: 2.2vw;
	text-align: center;
	}
.type2_grid .txt_wrap .txt_02{
	font-size: max(0.6875rem,1vw);
	line-height: 1.81;
	color: #a6a5ab;
	text-align: right;
	}

.modal_content.type2 .btn_close{
	display: block;
	width: 2.7vw;
	height: 2.7vw;
	background: url('../img/close_button_bl.svg') center center no-repeat;
	background-size: cover;
	position: absolute;
	top: 2.2vw;
	right: 2.2vw;
	border: none;
	cursor: pointer;
	}

.modal_content.type3{
	width: 100vw;
	min-height: 100vh;
	height: auto;
	display: flex;
	align-items: center;
	background: #ffffff;
	padding: 4.5vw;
	}

.mfp-container{
	padding: 0;
	}

.mfp-close {
	background: none;
	text-indent: -9999px;
	color: transparent;
	opacity: 1;
	background-size: cover;
	}

/* type1 用バツアイコン */
body.type1_open .mfp-close {
	width: 2.7vw;
	height: 2.7vw;
	background: url('../img/close_button_white.svg') center center no-repeat;
	right: 2.7vw;
	top: 2.7vw;
	}

/* type2 用バツアイコン */
body.type2_open .mfp-close {
	display: none;
	}

/* type3 用バツアイコン */
body.type3_open .mfp-close {
	position: fixed;
	width: 2.7vw;
	height: 2.7vw;
	background: url('../img/close_button_bl.svg') center center no-repeat;
	right: 2.7vw;
	top: 2.7vw;
	}

/* デフォルトの矢印を消す */
.mfp-arrow.mfp-arrow-left::before,
.mfp-arrow.mfp-arrow-right::before,
.mfp-arrow.mfp-arrow-left::after,
.mfp-arrow.mfp-arrow-right::after {
	content: '';
	display: none;
	}
.mfp-arrow {
	position: absolute;
	opacity: 1;
	top: 50%;
	transform: translateY(-50%);
	width: 4.5vw; 
	height: 4.5vw;
	}
/* 矢印の背景画像を指定 */
.mfp-arrow.mfp-arrow-left {
	background: url('../img/arrow_left.png') no-repeat center center;
	background-size: cover;
	left: 9vw;
	}

.mfp-arrow.mfp-arrow-right {
	background: url('../img/arrow_right.png') no-repeat center center;
	background-size: cover;
	right: 9vw;
	}



.button {
    position: relative;
    background: transparent;
    border: 0.005vw solid #000;
    font-family: "FOT-TsukuMin Pro";
    font-weight: normal;
	font-size: max(1.1875rem,1.7vw);
    letter-spacing: 0.1em;
    line-height: 1.21;
    text-align: center;
    color: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.button span {
    z-index: 1;
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

.button .arrow {
    position: absolute;
    right: 2.1vw;
    top: 2.1vw;
    width: 1.7vw;
    height: 1.7vw;
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

.button::before {
    position: absolute;
    width: 1vw;
    height: 100%;
    left: 0;
    top: 0;
    content: '';
    background: -webkit-gradient(linear, left top, right top, from(#eed9e5), color-stop(50%, #d3caf8), to(#d1e1fb));
    background: linear-gradient(0.25turn, #eed9e5 0%, #d3caf8 50%, #d1e1fb 100%);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.button:hover::before {
    width: 100%;
    background: -webkit-gradient(linear, left top, right top, from(#eed9e5), color-stop(50%, #b9acf4), to(#d1e1fb));
    background: linear-gradient(0.25turn, #eed9e5 0%, #b9acf4 50%, #d1e1fb 100%);
}

.button:hover span {
    color: white;
}

.button:hover .arrow g g {
    stroke: #FFF;
}

.button:hover .arrow path {
    fill: #FFF;
}

/*color-guide*/
#color-guide {
    position: relative;
    background-color: white;
}

#color-guide .fadein{
    position: relative;
    padding: 15.3vw 14.5vw 10.6vw;
}

#color-guide .title-container {
    margin-bottom: 5.4vw;
}

#color-guide .title-container .t1 {
    font-family: "FOT-TsukuMin Pro";
    font-weight: normal;
	font-size: max(4.1875rem,6vw);
    letter-spacing: 0.1em;
    line-height: 1.367;
    background: -webkit-gradient(linear, left top, left bottom, from(#eed9e5), color-stop(60.1%, #e6cacc), to(#c8e8c0));
    background: linear-gradient(#eed9e5 0%, #e6cacc 60.1%, #c8e8c0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#color-guide .title-container .t2 {
    font-family: "FOT-TsukuMin Pro";
    font-weight: normal;
	font-size: max(4.1875rem,6vw);
    letter-spacing: 0.1em;
    line-height: 1;
    background: -webkit-gradient(linear, left top, left bottom, from(#eed9e5), color-stop(0%, #b9acf4), color-stop(50.25%, #d2d9d9), to(#d1e1fb));
    background: linear-gradient(#eed9e5 0%, #b9acf4 0%, #d2d9d9 50.25%, #d1e1fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#color-guide .title-container .t3 {
    font-family: "FOT-TsukuMin Pro";
    font-weight: normal;
	font-size: max(1.16rem,1.2vw);
    letter-spacing: 0.1em;
    line-height: 4.166;
    color: #1a1311;
}

#color-guide .text-container {
    margin-bottom: 10vw;
}

#color-guide .text-container .text1 {
    font-family: 'YuGo-Medium-83pv-RKSJ-H';
	font-size: max(1.43rem,2vw);
    letter-spacing: 0.1em;
    line-height: 1.3;
    margin-bottom: 3.2vw;
}

#color-guide .text-container .text1 div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 0.5vw;
}

#color-guide .text-container .text1 div img {
    width: 14vw;
    margin-right: 0.9vw;
}

#color-guide .text-container .text1 div span {
    margin-top: 0.4vw;
}

#color-guide .text-container .text2 {
    font-family: YuGo-Medium-83pv-RKSJ-H;
	font-size: max(1.16rem,1.2vw);
    letter-spacing: 0.1em;
    line-height: 1.66;
}

#color-guide .button-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#color-guide .button-container .button {
    width: 37.8vw;
    height: 5.7vw;
}

#color-guide .image img {
    position: absolute;
    top: 14.6vw;
    right: 15.6vw;
    width: 28vw;
}

/*product*/
#product {
    background-color: white;
	border-top: 0.005vw solid #707070;
    padding: 8.9vw 14.3vw 16.3vw;
}

#product .title {
    text-align: right;
    margin-bottom: 2.4vw;
}

#product .title .--en {
	font-family: "FOT-TsukuMin Pro";
	font-weight: normal;
	font-size: max(4.1875rem,6vw);
	letter-spacing: 0.1em;
	line-height: 1.179;
	color: #1a1311;
}

#product .title .--ja {
	font-family: "FOT-TsukuMin Pro";
	font-weight: normal;
	font-size: max(1.16rem,1.2vw);
	letter-spacing: 0.1em;
	line-height: 1.2;
	color: #1a1311;
}

#product .descr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-bottom: 6vw;
}

#product .descr .product {
    width: 31.6vw;
}

#product .descr .intro {
    width: 29.8vw;
}

#product .descr .intro .text {
    margin-top: 3.9vw;
    font-family: YuGo-Medium-83pv-RKSJ-H;
}

#product .descr .intro .text .t1 {
	font-weight: normal;
	font-size: max(0.5375rem,0.7vw);
	letter-spacing: 0.05vw;
	line-height: 1.26;
	text-align: left;
	color: #cf0240;
	margin-bottom: 1vw;
}

#product .descr .intro .text .t2 {
    font-weight: normal;
    font-size: max(0.42rem,0.6vw);
    letter-spacing: 0.05vw;
    line-height: 1.58;
    text-align: left;
    color: #22201e;
}

#product .descr .intro .text .t2 ul{
	list-style-position: outside;
	list-style-type: disc;
	margin-left: 0.8rem;
	}
#product .descr .intro .text .t2 ul li::marker{
	font-size: max(0.31rem,0.45vw);
	}


#product .button-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	margin-bottom: 9vw;
}

#product .button-container .button {
    width: 37.8vw;
    height: 5.7vw;
}

#product .text-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#product .text-container .text {
    font-family: YuGo-Medium-83pv-RKSJ-H;
    font-weight: normal;
	font-size: max(1.43rem,2vw);
    letter-spacing: 0.01vw;
    line-height: 1.75;
    text-align: center;
    color: #22201e;
}
/*movie*/
#movie{
	width: 84.5vw;
	margin: 0 auto 16.3vw;
	}

#movie .movie_ttl{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	position: relative;
	}

#movie .movie_ttl img{
	display: block;
	width: 6vw;
	height: auto;
	}

#movie .movie_ttl:before{
	content: '';
	position: absolute;
	left: 0;
	display: flex;
	align-items: center;
	width: calc(50% - 5.9vw);
	height: 1px;
	background: var(--col_main);
	}
#movie .movie_ttl:after{
	content: '';
	position: absolute;
	right: 0;
	display: flex;
	align-items: center;
	width: calc(50% - 5.9vw);
	height: 1px;
	background: var(--col_main);
	}

#movie .movie_wrap{
	width: 100%;
	margin-top: 2.7vw;
	}

#movie .movie_wrap iframe{
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	}

#download {
    background: url("../img/download.jpg") no-repeat;
    background-color: white;
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 31vw;
}

#download .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#download .container .text {
    margin-bottom: 2vw;
}

#download .container .text img {
    width: 18.7vw;
}

#download .container .button-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#download .container .button-container .button {
    width: 37.8vw;
    height: 5.7vw;
    background-color: white;
}


/*footer*/
footer {
    position: relative;
    background-color: #96A2AB;
    padding: 6vw 14.3vw 2.8vw;
}

footer .container {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

footer .container .logo {
    width: 11.3vw;
}

footer .container .menu1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

footer .container .menu1 li a {
    position: relative;
    font-family: "FOT-TsukuMin Pro";
    font-weight: normal;
	font-size: max(1.16rem,1.6vw);
    letter-spacing: 0.01vw;
    line-height: 2;
    color: #fff;
}

footer .container .menu1 li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.4vw;
    width: 0;
    border-bottom: 0.005vw solid white;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

footer .container .menu1 li a:hover::after {
    width: 100%;
}

footer .container .menu1 li:not(:last-child) {
    margin-bottom: 0;
}

footer .container .menu2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

footer .up-btn {
    position: absolute;
    bottom: 4.1vw;
    right: 4.1vw;
    width: 6vw;
    height: 6vw;
    background-color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

footer .up-btn img {
    width: 1.66vw;
    height: 0.78vw;
    -webkit-transition: all .3s;
    transition: all .3s;
}

footer .up-btn:hover img {
    margin-top: -1vw;
}

@media screen and (max-width: 767px) {
    footer .up-btn {
        bottom: 23.4vw;
        right: 23.4vw;
        width: 23.4vw;
        height: 23.4vw;
    }
    footer .up-btn img {
        width: 10.6vw;
        height: 7.1vw;
    }
}

footer .container .menu2 li a {
    position: relative;
    font-family: "FOT-TsukuMin Pro";
    font-weight: normal;
	font-size: max(0.89375rem,1.3vw);
    letter-spacing: 0.1em;
    line-height: 1.4;
    color: #fff;
}

footer .container .menu2 li a::after {
    content: '';
    width: 1vw;
    height: 0.9vw;
    background: url("../img/link-arrow.png") no-repeat;
    background-size: cover;
    position: absolute;
    right: -1.5vw;
    top: 35%;
}

footer .container .menu2 li a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.9vw;
    width: 0;
    border-bottom: 0.005vw solid white;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

footer .container .menu2 li a:hover::before {
    width: 100%;
}

footer .container .menu2 li:not(:last-child) {
    margin-bottom: 1vw;
}


/*download-page*/
#top-fv {
    position: relative;
    background-color: #ADADAD;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}

#top-fv .mark {
    position: fixed;
    top: 2.1vw;
    right: 0;
    left: 0;
    width: 15.6vw;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 2;
    opacity: 1;
    -webkit-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

#top-fv .mark.is-hide {
    opacity: 0;
}

@media (max-width: 767px) {
    #top-fv .mark {
        top: 5.4vw;
        width: unset;
        height: 4.1vw;
    }
    #top-fv .mark svg {
        height: 100%;
    }
}

#top-fv .mark #logo path {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

#top-fv .mark #logo.is-change path {
    fill: #1a1311;
}

#top-fv #fv-container {
    position: relative;
    background-color: #ADADAD;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 56.2vw;
    min-height: 100vh;
}

#top-fv #svgwave {
    width: 15.6vw;
    height: 15.6vw;
}

#top-fv #svgwave foreignObject {
    overflow: visible;
}

#top-fv #svgwave foreignObject #img-container {
    width: 282px;
    height: 282px;
    background-size: contain;
    display: inline-block;
    overflow: hidden;
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg);
}

#top-fv #svgwave foreignObject #img-container #img-list {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(12deg) scale(1.2);
    transform: rotate(12deg) scale(1.2);
}

#top-fv #svgwave foreignObject #img-container #img-list img {
    position: absolute;
    width: 100%;
}

#download-page #top-fv {
    background: url("../img/download/top-fv-bg-n.jpg") no-repeat;
    background-size: contain;
    background-attachment: fixed;
    height: 66.2vw;
    min-height: unset;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#download-page #top-fv.cover {
    background-size: cover;
}

#download-page #top-fv .content {
    font-family: "FOT-TsukuMin Pro";
    font-weight: normal;
    text-align: center;
    color: #fff;
}

#download-page #top-fv .content .t1 {
    font-size: 6vw;
    letter-spacing: 1rem;
    line-height: 7vw;
    color: #fff;
}

#download-page #top-fv .content .t2 {
    font-size: 2.4vw;
    letter-spacing: 1rem;
    line-height: 2.9vw;
}

#download-page #kv {
    padding-top: 14.5vw;
    margin-top: -8.3vw;
    background-color: white;
    -webkit-clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
}

#download-page #kv .title {
    font-family: "FOT-TsukuMin Pro";
    font-weight: normal;
    font-size: 6vw;
    letter-spacing: 1rem;
    line-height: 7vw;
    text-align: center;
    color: #8b8b8b;
    margin-bottom: 5vw;
}

#download-page #kv .image {
    margin: 0 auto;
    width: 71.3vw;
}
#download-page #kv .image:first-of-type{
    margin: 0 auto 2.7vw;
}

#download-page #color {
    padding: 12.5vw 14.3vw 22.9vw;
    background-color: white;
}

#download-page #color .title {
    font-family: "FOT-TsukuMin Pro";
    font-weight: normal;
    font-size: 6vw;
    letter-spacing: 1rem;
    line-height: 7vw;
    text-align: center;
    color: #8b8b8b;
    margin-bottom: 8.4vw;
}
#download-page #color .list .item .name img {
    display: block;
    height: 1vw;
    width: auto;
	}

#download-page #color .leftup_wrap {
    margin-bottom: 22.9vw;
}

#download-page #color .leftup_wrap .mark {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

#download-page #color .leftup_wrap .mark img {
    height: 3.6vw;
	width: auto;
}

#download-page #color .leftup_wrap .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
	align-items: flex-start;
    margin-top: -7.8vw;
}

#download-page #color .leftup_wrap .list .item .model {
    width: 22.1vw;
    margin-bottom: 1vw;
}

#download-page #color .leftup_wrap .list .item .model a {
    width: 100%;
}

#download-page #color .leftup_wrap .list .item .name {
	font-weight: normal;
	font-size: max(0.75rem,1vw);
}


#download-page #color .leftup_wrap .list .item:nth-child(2) {
    margin-top: 7.8vw;
}

#download-page #color .leftup_wrap .list .item:last-child {
    margin-top: 15.6vw;
}

#download-page #color .leftup_wrap .mark+.list {
    margin-top: unset;
}

#download-page #color .rightup_wrap {
    margin-bottom: 22.9vw;
}
#download-page #color .rightup_wrap.mb0 {
    margin-bottom: 0;
}

#download-page #color .rightup_wrap .mark {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

#download-page #color .rightup_wrap .mark img {
    height: 3.6vw;
	width: auto;
}

#download-page #color .rightup_wrap .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    margin-top: -7.8vw;
}

.is-sp {
    display: none;
}

#download-page #color .rightup_wrap .list .item .model {
    width: 22.1vw;
    margin-bottom: 1vw;
}

#download-page #color .rightup_wrap .list .item .model a {
    width: 100%;
}

#download-page #color .rightup_wrap .list .item .name {
	font-weight: normal;
	font-size: max(0.75rem,1vw);
}

#download-page #color .rightup_wrap .list .item:nth-child(2) {
    margin-top: 7.8vw;
}

#download-page #color .rightup_wrap .list .item:last-child {
    margin-top: 15.6vw;
}

#download-page #color .rightup_wrap .mark+.list {
    margin-top: unset;
}

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(-250px * 7));
        transform: translateX(calc(-250px * 7));
    }
}

@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(-250px * 7));
        transform: translateX(calc(-250px * 7));
    }
}

/* Media Queries
==========================================================================*/

@media screen and (max-width:1200px) {
#color-guide .image img {
	right: 5.6vw;
	}
#product .descr .intro .text .t2 ul li{
	margin-bottom: 0.5vw;
	}
}
@media screen and (max-height:850px) {
.type1_grid .img_detail_wrap{
	display: flex;
	justify-content: center;
	overflow: hidden;
	}

.type1_grid .img_detail_wrap img{
	min-width: auto;
	width: auto;
	height: 90vh;
	}

.type2_grid .img_detail_wrap{
	display: flex;
	justify-content: center;
	}

.type2_grid .img_detail_wrap img{
	width: auto;
	height: 45vh;
	}

}

@media screen and (max-width:767px) {
html {
	-webkit-text-size-adjust: none;
	}
body{
	overflow-x: hidden;
	}

img {
	max-width: 100%;
	height: auto;
     }

/*hide*/
.pc{
	display: none;
	}
.sp{
	display: block;
	}

/*menu*/

.mainmenu_btn{
	width: 20px;
	height: 16px;
	top: 20px;
	left: 20px;
	}
.mainmenu_btn span{
	width: 20px;
	}
.mainmenu_btn span.middle {
	top: 7px;
	}
.mainmenu_btn span.bottom {
	bottom: 0px;
	}
.mainmenu_btn.active span.top {
	-webkit-transform: translateY(7.5px) rotate(-45deg);
	transform: translateY(7.5px) rotate(-45deg);
	}
.mainmenu_btn.active span.middle {
	opacity: 0;
	}
.mainmenu_btn.active span.bottom {
	-webkit-transform: translateY(-7.5px) rotate(45deg);
	transform: translateY(-7.5px) rotate(45deg);
	}

.mainmenu_wrap{
	height: 100dvh;
	align-items: flex-start;
	}

#mainmenu{
	padding: 26.9vw 5vw 0;
	}

#mainmenu ul li{
	padding-bottom: 5vw;
	font-size: max(1.5rem,6.1vw);
	}

#mainmenu a img.menu_txt_about{
	width: 17vw;
	}
#mainmenu a img.menu_txt_colorlineup{
	width: 34.8vw;
	}
#mainmenu a img.menu_txt_product{
	width: 21.6vw;
	}
#mainmenu a img.menu_txt_download{
	width: 27.9vw;
	}
#mainmenu a img.menu_txt_top{
	width: 10.4vw;
	}
#mainmenu a img.menu_txt_digitalcolorsimulation{
	width: 76.9vw;
	}
#mainmenu hr{
	width: 15.2vw;
	margin: 15.2vw 0;
	}

#bottommenu{
	bottom: 3.8vw;
	left: 5vw;
	}
#bottommenu ul{
	list-style-type: none;
	display: list-item;
	}
#bottommenu ul li{
	padding-bottom: 1vw;
	}
#bottommenu a{
	font-size: max(1rem,4vw);
	line-height: 1.3;
	}
.mainmenu_wrap .img_wrap{
	display: none;
	}

/*fv*/
.slide{
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	margin: 0 auto;
	overflow: hidden;
	}
.slide .wrap{
	position: relative;
	height: 100%;
	display: flex !important;
	justify-content: center;
	}
.slide picture {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	}
.slide .mainimg{
	width: 100%;
	height: 100%;
	object-fit: cover;
	}
.slide .slide_01 .mainimg{
	height: 110vh;
	height: 110dvh;
	}

.wrap.slide_04,
.slide_04 picture,
.slide_04 .mainimg {
	height: 100vh;
	height: 100dvh;
	width: 100%;
	}

.slide_04 .mainimg {
	width: 120%;
	max-width: none;
	object-fit: cover;
	transform: translateX(-5vw);
	}
.slide .slide_05 h1{
	top: 24.2vw;
	transform: translateX(-50%);
	width: 74.5vw;
	}

@keyframes slide_01{
	0% {
		opacity: 0;
		transform: translateY(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateY(-7.6vw); 
	}
}
@keyframes slide_04{
	0% {
		transform: translateX(-5vw);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes slide_05{
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.05);
	}
}
@keyframes fv_logo{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*about*/
#about{
	padding: 39.4vw 0 71.2vw;
	}
#about .about_h1{
	width: 87.78vw;
	padding-bottom: 3.3vw;
	}

#about .about_h1 img{
	width: 10.6vw;
	}

#about .about_copy_wrap{
	padding: 19.5vw 0 20.3vw;
	}

#about .about_copy_wrap .txt_01 img{
	width: 59.2vw;
	}
#about .about_copy_wrap .txt_02 img{
	margin-top: 7.3vw;
	width: 66.9vw;
	}

#about .about_body_wrap .txt_01{
	font-size: max(0.8125rem,3.3vw);
	line-height: 2.69;
	}
#about .about_body_wrap .txt_03 img{
	margin-top: 9.6vw;
	width: 71.7vw;
	}
#about .about_img_01{
	width: 59vw;
	margin: 16vw auto 12.7vw;
	}
#about .about_feature_wrap{
	width: 54.9vw;
	padding: 6.1vw 0 7.6vw;
	}
#about .about_feature_wrap .about_img_02{
	width: 43.5vw;
	margin: 0 auto 2.5vw;
	}
#about .about_feature_wrap .txt_01{
	font-size: max(0.75rem,3vw);
	line-height: 2.16;
	}

/*lineup*/
#lineup{
	background: url('../img/lineup/lineup_bg.png') bottom center no-repeat;
	background-size: 100%;
	padding: 75vw 0 26.4vw;
	}

#lineup .lineup_title_wrap .wrap_01,#lineup .lineup_title_wrap .wrap_02{
	margin-bottom: 4.5vw;
	}

#lineup .scroll_infinity_item{
	flex: 0 0 auto;
	}
#lineup .scroll_infinity_item img{
	width: 53.6vw;
	max-width: none;
	}

#lineup .lineup_thumb_wrap{
	margin-top: 27.9vw;
	flex-wrap: wrap;
	gap: 0 1.8vw;
	}

#lineup .lineup_thumb_wrap .item{
	width: calc(50% - 0.9vw);
	}

#lineup .lineup_thumb_wrap .item_01,
#lineup .lineup_thumb_wrap .item_03 {
	transform: translateY(25.4vw);
	}

#lineup .lineup_anchor{
	margin: 74.5vw 0 65.5vw;
	gap: 10.1vw 6.8vw;
	flex-wrap: wrap;
	}

#lineup .lineup_anchor a{
	width: 36.6vw;
	}

#lineup .lineup_item{
	width: 93.3vw;
	margin: 0 auto 1.7vw;
	padding: 17.3vw 10.1vw;
	}

#lineup .lineup_item_ttl img{
	height: 6.1vw;
	}

#lineup .lineup_item .txt_01{
	margin-top: 7.1vw;
	font-size: max(0.6875rem,2.7vw);
	line-height: 1.81;
	}

#lineup .lineup_item_grid{
	margin-top: 14.5vw;
	grid-template-columns: repeat(1, 1fr);
	gap: 12.7vw 0;
	}

#lineup .lineup_item a{
	text-align: center;
	}

#lineup .lineup_item a img{
	margin-bottom: 3vw;
	}
#lineup .lineup_item a .link_txt img{
	height: 3vw;
	}

#lineup .lineup_item .flex{
	margin-top: 14.5vw;
	}
#lineup .lineup_item .flex a{
	width: 100%;
	}

#lineup a.btn_colorchart{
	font-size: max(0.9375rem,3.8vw);
	width: 93.3vw;
	height: 9.1vw;
	margin: 25.4vw auto 0;
	background-position: center right 6.3vw;
	background-size: 2.5vw 3.81vw;
	}

.modal_content {
	height: 100dvh;
	}

.modal_content.type1{
	display: flex;
	align-items: center;
	padding: 0;
	}
.type1_grid{
	width: 100%;
	grid-template-columns: none;
	grid-template-rows: repeat(2, auto);
	gap: 0 7vw;
	}

.type1_grid .img_detail_wrap{
	order: 1;
	display: flex;
	justify-content: center;
	}


.type1_grid .img_detail_wrap img{
	display: block;
	width: 67.1vw;
	height: auto;
	}

.type1_grid .txt_wrap{
	order: 2;
	display: flex;
	padding: 8.3vw 0 5.5vw 7.1vw;
	}

.type1_grid .shoulder{
	margin-bottom: 3.8vw;
	padding-bottom: 2vw;
	}
.type1_grid .shoulder img{
	width: 26.2vw;
	}
.type1_grid .detail_ttl{
	height: 14.5vw;
	}
.type1_grid .col_wrap{
	margin-top: 9.6vw;
	flex-flow: row wrap;
	gap: 2.5vw 6.1vw;
	}
.type1_grid .col{
	display: inline-flex;
	font-size: max(0.875rem,3.5vw);
	}
.type1_grid .col_icon{
	width: 5vw;
	margin-right: 02.5vw;
	}
.type1_grid .recipe_wrap ul{
	margin-top: 8.9vw;
	font-size: max(0.5625rem,2.2vw);
	}

.modal_content.type2{
	display: flex;
	align-items: center;
	}

.type2_inner{
	width: 85.4vw;
	padding: 13.9vw 10vw 3.8vw;
	}
.type2_grid{
	grid-template-rows: auto auto;
	gap: 10vw;
	}


.type2_grid .img_detail_wrap img{
	width: 100%;
	height: auto;
	}

.type2_grid .txt_wrap hgroup{
	margin-bottom: 7vw;
	}
.type2_grid .txt_wrap h2 img{
	height: 6.1vw;
	}
.type2_grid .txt_wrap hgroup p{
	font-size: max(0.625rem,2.5vw);
	margin-top: 2.5vw;
	}
.type2_grid .txt_wrap .txt_01{
	font-size: max(0.6875rem,2.7vw);
	line-height: 1.81;
	margin-bottom: 7vw;
	}
.type2_grid .txt_wrap .txt_02{
	font-size: max(0.5625rem,2.2vw);
	}

.modal_content.type2 .btn_close{
	width: 4.5vw;
	height: 4.5vw;
	top: 3.8vw;
	right: 3.8vw;
	}

.modal_content.type3{
	padding: 0;
	background: #D9D9D9;
	}

/* type1 用バツアイコン */
body.type1_open .mfp-close {
	position: fixed;
	width: 4.5vw;
	height: 4.5vw;
	right: 7.6vw;
	top: 5vw;
	}

/* type3 用バツアイコン */
body.type3_open .mfp-close {
	width: 4.5vw;
	height: 4.5vw;
	right: 7.6vw;
	top: 5vw;
	}

.mfp-arrow {
	width: 10.1vw; 
	height: 10.1vw;
	}
/* 矢印の背景画像を指定 */
.mfp-arrow.mfp-arrow-left {
	left: 1.5vw;
	}

.mfp-arrow.mfp-arrow-right {
	right: 1.5vw;
	}

    #color-guide .fade-up {
        padding: 20vw 10.2vw;
    }
    #color-guide .title-container .t1 {
        font-size: 11.2vw;
        line-height: 16.6vw;
    }
    #color-guide .title-container .t2 {
        font-size: 11.2vw;
    }
    #color-guide .title-container .t3 {
        font-size: 3vw;
        line-height: 8.2vw;
    }
    #color-guide .title-container {
        margin-bottom: 6vw;
    }
    #color-guide .text-container .text1 {
        font-size: 6.6vw;
        line-height: 16.1vw;
        margin-bottom: 1vw;
    }
    #color-guide .text-container .text1 div img {
        width: 46.6vw;
        margin-right: 1vw;
    }
    #color-guide .text-container .text1 div span {
        display: inline-block;
        margin-top: 3vw;
        font-size: 4vw;
        margin-left: 1vw;
        line-height: 1vw;
    }
    #color-guide .text-container .text2 {
        font-size: 3.5vw;
        line-height: 7.1vw;
        letter-spacing: 0.7vw;
    }
    #color-guide .image {
        text-align: center;
        margin-bottom: 8.2vw;
    }
    #color-guide .image img {
        position: relative;
        top: unset;
        right: unset;
        width: 50vw;
    }
    .button {
        font-size: 3vw;
    }
    #color-guide .button-container .button {
        width: 54.1vw;
        height: 9.3vw;
    }
    .button .arrow {
        right: 2.3vw;
        top: 3.4vw;
        width: 2.8vw;
        height: 2.8vw;
    }
    #color-guide .text-container {
        margin-bottom: 15.3vw;
    }
    #product {
        padding: 20.8vw 10.4vw;
    }
    #product .title {
        margin-bottom: 3vw;
    }
    #product .title .--en {
        font-size: 11.2vw;
    }
    #product .title .--ja {
        font-size: 3.3vw;
        line-height: 8.2vw;
    }
#product .descr {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        margin-bottom: 8.3vw;
    }
#product .descr .product {
        width: 68.7vw;
        margin: 0 auto 8.3vw;
    }
#product .descr .intro {
        width: 100%;
    }
#product .descr .intro .text .t1 {
        font-size: 2.5vw;
        line-height: 3vw;
    }

#product .descr .intro .text .t2 {
        font-size: 2.5vw;
        line-height: 3.8vw;
    }
#product .descr .intro .text .t2 ul li{
	margin-bottom: 1vw;
	}

#product .button-container .container {
        width: 54.1vw;
    }
#product .button-container .container a .button {
        width: 54.1vw;
        height: 9.3vw;
    }

#product .text-container .text {
        font-size: 3.5vw;
        line-height: 5.6vw;
        letter-spacing: 0.4vw;
    }

/*movie*/
#movie{
	width: 93.6vw;
	margin: 0 auto 30vw;
	}

#movie .movie_ttl img{
	width: 10.1vw;
	}

#movie .movie_ttl:before{
	width: calc(50% - 6.8vw);
	}
#movie .movie_ttl:after{
	width: calc(50% - 6.8vw);
	}

#movie .movie_wrap{
	margin-top: 5vw;
	}

/*download*/
    #download {
        background: url("../img/download_sp.jpg") no-repeat;
        background-size: cover;
        height: 51vw;
    }
    #download .container .text img {
        width: 36.4vw;
    }
    #download .container .button-container .button {
        width: 56.1vw;
        height: 9.3vw;
    }
    .is-sp {
        display: block;
    }
    .is-pc {
        display: none;
    }
    footer {
        padding: 10.2vw 10.2vw;
    }
    footer .container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    footer .container .menu1 {
        margin-bottom: 5.1vw;
    }
    footer .container .logo {
        width: 21.8vw;
        margin-bottom: 4.1vw;
    }
    footer .container .menu1 li:not(:last-child) {
        margin-bottom: 3vw;
    }
    footer .container .menu1 li a {
        font-size: 3.5vw;
    }
    footer .container .menu2 li:not(:last-child) {
        margin-bottom: 2vw;
    }
    footer .container .menu2 li a {
        font-size: 2.8vw;
        line-height: 3.3vw;
    }
    footer .container .menu2 li a::after {
        right: -4.1vw;
        top: 37%;
        width: 2.5vw;
        height: 1.9vw;
    }
    footer .up-btn {
        bottom: 9.3vw;
        right: 9.3vw;
        width: 9.3vw;
        height: 9.3vw;
    }
    footer .up-btn img {
        width: 4.2vw;
        height: 2.8vw;
    }

/*download-page*/
#download-page #color .leftup_wrap .list .item .name,#download-page #color .rightup_wrap .list .item .name {
	font-size: 0.3125rem;
	}
}


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

#mainmenu hr{
	margin: 8vw 0;
	}
.type1_grid .img_detail_wrap img{
	width: 60vw;
	}
}





@media print{
}