MV

type01

#mv_outer{
	/*mvに背景とかはここを利用する*/
	position: relative;
    padding-bottom: 50px;
}
#mv{
	width: 100%;
	height: 72vh;
	min-height: 500px;
}
#mv:after{
	/*スライドに重ねる色*/
	pointer-events: none;
}
#mv .mv_text{
	height: 100%;
	align-items: flex-end;/*垂直方向中央*/
	width: 100% !important;
	left: 0 !important;
	bottom: -30px !important;
}
#mv .mv_text > div{
	max-width: none !important;
	box-sizing: border-box;
	width: auto;
    margin-left: 5%;
	position: relative;
	color: var(--i_txt_color);
}
#mv .mv_text h2{
	font-size: 60px;/* ←max-font-size的意味合いで使用する。動作はjs。*/
	line-height: 1.1;
	letter-spacing: 0rem;
	font-weight: 700;
	font-size: 4.5rem !important;
	position: relative;
    display: block;
    padding: 15px 15px 10px;
    margin-bottom: 20px;
    background: var(--i_bg_color);
}
#mv .mv_text p{
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: 0rem;
    background: var(--i_bg_color);
    padding: 10px 10px 5px;
}
#mv_outer #mv .mv_text div p.static{
    display: inline-block !important;
}
#mv .mv_scroll,
#mv .mv_pointer,
#mv .mv_arrow{
	display: none;
}
@media screen and (max-width: 100vh){
	#mv{
		height: 68vh;
	}
}
@media screen and (min-width: 901px){
    #mv_outer{
        padding-top: 30px;
    }
}
@media screen and (max-width: 900px){
    #mv_outer{
        padding-bottom: 30px;
    }
}
@media screen and (max-width: 650px){
    #mv .mv_text > div{
        margin-left: 2%;
    }
	#mv .mv_text p{
		font-size: 1.65rem;
	}
	#mv .mv_text h2{
		font-size: 6vw !important;
		line-height: 1.5;
        margin-bottom: 10px;
	}
}
/*カルーセル*/
#mv.slide08{
    overflow: visible;
}
#mv.slide08 .mv_img li{
    margin: 0 50px;
}
@media screen and (min-width: 901px){
    #mv.slide08 .mv_img{
        padding-bottom: 50px;
    }
    #mv.slide08 .mv_img li:nth-of-type(even){
        margin-top: 50px;
    }
}
@media screen and (max-width: 650px){
    #mv.slide08 .mv_img li{
        margin: 0 10px;
    }
}

type02

▼MV

#mv_outer{
	/*mvに背景とかはここを利用する*/
	position: relative;
	background: #000;
}
#mv{
	width: 105%;
	margin-right: 0;
	height: 90vh;
	min-height: 500px;
	position: relative;
}
#mv:before{
	position: absolute;
	display: block;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	pointer-events: none;
	left: 0;
	top: 0;
	border-width: 90vh 40vw 0 0;
	border-color: rgba(0, 99, 179, 0.8) transparent transparent transparent;
	z-index: 7;	
}
#mv:after{
  pointer-events: none;
  background: rgba(0, 0, 0, 0.3);	
}
#mv .mv_text{
	align-items: flex-start;/*垂直方向中央*/
	bottom: 15% !important;
	left: 0;
	width: auto;
	height: 55%;
}
#mv .mv_text>div{
	color: #fff;
	padding: 50px;
}
#mv .mv_text h2{
	font-size: 60px;/* ←max-font-size的意味合いで使用する。動作はjs。*/
	line-height: 1.1;
	letter-spacing: 0.5rem;
	font-weight: 500;
	font-size: 4.0rem !important;
	position: relative;
	margin-bottom: 20px;
}
#mv .mv_text h2:before{
	position: absolute;
	display: block;
	content: "One & Only";
	white-space: pre;
	width: 100%;
	height: 100%;
	top: -160px;
	left: 0;
	line-height: 1.3;
	font-size: 11.0rem;
	pointer-events: none;
	font-weight: 400;
	letter-spacing: 0.2rem;
	font-family: 'Mrs Saint Delafield', cursive;
}
#mv .mv_text p{
	padding-top: 5px;
	font-size: 1.8rem;	
	font-weight: 500;
	letter-spacing: 0.4rem;
}
#mv_outer #mv .mv_text div p.static{
	display: inline !important;
}
#mv .mv_scroll,
#mv .mv_arrow,
#mv .mv_pointer{
	display: none;
}
@media screen and (max-width: 100vh){
	#mv{
		height: 75vh;
	}
    #mv:before{
        border-width: 75vh 40vw 0 0;
    }
}
@media screen and (max-width: 1550px){
    #mv .mv_text h2{
        font-size: 3.2rem !important;
    }
}
@media screen and (max-width: 900px){
    #mv .mv_text{
        bottom: 10% !important;
    }
}

@media screen and (max-width: 600px){
	#mv .mv_text h2{
		line-height: 1.5;
		font-size: 5.6vw !important;
		letter-spacing: 0.0rem;
	}
	#mv .mv_text p{
		letter-spacing: 0.0rem;
		font-size: 1.55rem;
		padding-top: 0;
	}
	#mv .mv_pointer{
		padding-left: 5%;
		bottom: 20px;
	}
}
@media screen and (max-width: 500px){
    #mv .mv_text h2:before{
        top: -120px;
        font-size: 9.0rem;
    }
    #mv .mv_text>div{
        padding: 20px;
    }
}
@media screen and (max-width: 400px){
    #mv .mv_text h2:before {
        top: -100px;
        font-size: 8.3rem;
    }    
}

▼.block_news_1.add_design12

#top_news + .block_news_1.add_design12 .inner {
    background: var(--i_sub2_color);
    padding: 10px;
}
.index > #mv_outer:not(.edit_outer) + main{
	overflow: visible !important;
	background: transparent !important;
	margin-top: -330px;
    z-index: 100;
}
#top_news + div,
#top_news + div li > p::before{
    color: #fff;
    font-size: 1.3rem;
}
#top_news + .block_news_1 ul > li {
    border-top: 1px solid rgba(255,255,255,0.35);
    border-bottom: 1px solid rgba(255,255,255,0.35);  
}
#top_news + .block_news_1 ul > li:first-child{
    border-bottom: none;
}
#top_news + .block_news_1 > .content_wrapper {
	background: rgba(28, 28, 28, 0.8);
	padding: 30px;
	margin-right: 0;
	z-index: 1000;
}
#top_news + .block_news_1 .contents_btn01 a span{
	padding: 11px 20px 10px;
}
@media screen and (max-width: 1400px){
    #top_news + .block_news_1 > .content_wrapper{
        width: 700px;
    }
}
@media screen and (max-width: 1200px){
    #top_news + .block_news_1 > .content_wrapper {
        width: 520px;
    }
}
@media screen and (max-width: 900px){
    .index > #mv_outer:not(.edit_outer) + main{
        margin-top: -150px;
    }
    #top_news + .block_news_1 > .content_wrapper{
        width: 95%;
    }
    #top_news + .block_news_1 > .content_wrapper{
        margin: 0 auto;
    }
}
@media screen and (max-width: 500px){
    #top_news + .block_news_1.add_design14 .slick-arrow{
        top: calc(35% - 20px);
    }
}

type03

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;1,500&display=swap');

#mv_outer{
	/*mvに背景とかはここを利用する*/
	position: relative;
	box-sizing: border-box;
    background: -moz-linear-gradient(top left, #f4f8fe, #d2deed); 
    background: -webkit-linear-gradient(top left, #f4f8fe, #d2deed); 
    background: linear-gradient(to bottom right, #f4f8fe, #d2deed);
}
#mv_outer:before{
    position: absolute;
    content: "SHINE YOUR LIFE";
    font-family: 'Cormorant Garamond', serif;
    top: 20px;
    left: -20px;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    font-weight: 500;
    font-size: 25rem;
    line-height: 1;
    color: var(--i_bg_color);
    pointer-events: none;
}
#mv{
	width: 100%;
	height: 100vh;
	min-height: 500px;
}
#mv .mv_img,
#mv:after{
	display: block;
	width: 50%;
	height: 100%;
    margin-left: 50%;
	border-radius: 100vw 100vw 0 0;
}
#mv:after{
    /*テキストが見えにくい時に使用*/
    display: none;
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), transparent 40%);
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 1), transparent 40%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), transparent 40%);
	pointer-events: none;
}
#mv .mv_text{
	height: 100%;
	align-items: center;/*垂直方向中央*/
	width: 100% !important;
	left: 0 !important;
	bottom: 0 !important;
}
#mv .mv_text>div{
	box-sizing: border-box;
	width: 90%;
	color: var(--i_txt_color);
}
#mv .mv_text h2{
	font-size: 60px;/* ←max-font-size的意味合いで使用する。動作はjs。*/
	line-height: 1.5;
	letter-spacing: 0.4rem;
	font-weight: 400;
	font-size: 2.6vw !important;
	position: relative;
}
#mv .mv_text p{
	font-size: 1.6vw;
	font-weight: 400;
	letter-spacing: 0.3rem;
}
#mv .mv_pointer li{
    margin: 0;
}
#mv .mv_pointer li:before{
	background: var(--i_border_color);
}
#mv .mv_pointer li.current:before{
    background: var(--i_main_color);
}
#mv .mv_scroll,
#mv .mv_arrow{
	display: none;
}
@media screen and (max-height: 650px){
    #mv_outer::before{
        font-size: 20rem;
    }
}
@media screen and (max-width: 100vh){
	#mv{
		height: 85vh;
	}
}
@media screen and (min-width: 901px){
    #mv_outer{
        padding-bottom: 30px;
    }
    #mv .mv_text{
        width: 50% !important;
    }
    #mv .mv_text>div{
        width: 85%;
    }
    #mv .mv_pointer{
        width: 50%;
        bottom: 25%;
        padding: 0 5%;
    }
}
@media screen and (max-width: 900px){
    #mv_outer:before{
        display: none;
    }
    #mv .mv_img,
    #mv:after{
        width: 95%;
        margin-left: 2.5%;
    }
    #mv:after{
        display: block;
        background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent 40%);
        background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent 40%);
        background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 40%);
    }
    #mv .mv_text{
        align-items: flex-end;
        height: 95%;
        bottom: 5% !important;
    }
    #mv .mv_text>div{
        color: var(--i_bg_color);
    }
	#mv .mv_text h2{
		font-size: 6vw !important;
		letter-spacing: 0.2rem;
	}
	#mv .mv_text p{
        padding-top: 10px;
		letter-spacing: 0.2rem;
		font-size: 1.7rem;
	}
    #mv .mv_pointer li:before{
        background: rgba(255, 255, 255, 0.3);
    }
}

type04

#mv_outer{
	/*mvに背景とかはここを利用する*/
	position: relative;
	padding-bottom: 80px;
}
#mv{
	width: 100%;
	height: 78vh;
	min-height: 500px;
}
#mv_outer:before{
	display: block;
	position: absolute;
	content: "";
	width: 85%;
	height:80%;
	bottom:0;
	left: 0;
	background: var(--i_main_color);
    z-index: -2;
}
#mv_outer:after{
    position: absolute;
    display: block;
    content: "";
    width: 2%;
    bottom: 0;
    right: 15%;
    border-top: 70vh solid #fff;
    border-left: 35vh solid transparent;
    pointer-events: none;
    z-index: -1;
}
#mv:after{
	/*スライドに重ねる色*/
	pointer-events: none;
	width: 85%;
	left: 15%;
	right: 0;
	background: rgba(0,0,0,0);
}
#mv .mv_img li{
	width: 85%;
	left: 15%;
	right: 0;
}
#mv:before{
	position: absolute;
	display: block;
	content: "";
	pointer-events: none;
}
#mv .mv_text{
	bottom: 280px;
	height: calc(100% - 140px);
	top: 70px;
	align-items: center;/*垂直方向中央*/
	width: 100% !important;
	left: 0 !important;
}


#mv .mv_text>div{
	max-width: none !important;
	box-sizing: border-box;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 140px;
	position: relative;
}

#mv .mv_text>div:before{
	position: absolute;
	display: inline-block;
	content: "CREATING THE FUTURE";
	white-space: pre;
	width: auto;
	height: auto;
	top: 0;
	left: 50px;
	line-height: 1.1;
	font-size: 8.8rem;
	letter-spacing: -0.1rem;
	pointer-events: none;
	font-weight: 900;
	color: var(--i_txt_color);
	font-family: 'Oswald', 'Noto Sans JP', "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	animation: ani1 2s forwards;
	z-index: 1;
    background: #fff;
    padding: 15px;
}

#mv .mv_text h2{
	font-size: 3.4rem !important;/* ←max-font-size的意味合いで使用する。動作はjs。*/
	line-height: 1.2;
	font-weight: 600;
	animation: ani2 2s forwards;
	color: var(--i_txt_color);
    background: #fff;
    display: inline-block;
    padding: 5px 15px;
    margin-bottom:10px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#mv .mv_text h2{
		animation:none;
	}
}
@keyframes ani1 {
  0% {
  transform: translateX(-1000px);
  }

  100% {
  transform: translateX(0px);
  }
}
@-moz-document url-prefix() {
  #mv .mv_text h2 {
    animation: ani2 2s forwards;
  }
}

#mv .mv_text p{
	font-size: 2rem;
	line-height: 1.8;
	font-weight: 600;
	letter-spacing: 0.1rem;
	animation: ani2 2s forwards;
	color: var(--i_txt_color);
    background: #fff;
    display: table-cell;
    padding: 5px 15px;
}
@keyframes ani2 {
  0% {
  transform: translateX(700px);
  }

  100% {
  transform: translateX(0px);
  }
}
#mv_outer #mv .mv_text div p.static {
    display: table-cell !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #mv .mv_text p{
        animation:none;
    }
}
@-moz-document url-prefix() {
  #mv .mv_text p {
    animation: ani2 2s forwards;
  }
}#mv .mv_scroll {
	width: 3px;
	height: auto;
	position: absolute;
	left: 25px;
	bottom:-17px;
}
#mv .mv_scroll a{
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: vertical-lr;
	font-weight: bold;
	font-size: 10px;
	position: relative;
	padding-bottom: 80px;
	height: auto;
	width: auto;
	text-indent: 0;
	potision: relative;
	transition: all .3s ease-in-out;
	text-align: right;
	color: rgba(255,255,255,0.2) !important;
	letter-spacing: 0.2rem;
	font-family: 'Oswald', sans-serif;
}
#mv .mv_scroll a::before {
	width: 1px;
	height: 70px;
	transform: none;
	position: absolute;
	bottom: -15px;
	left: 1px;
	top: auto;
	background: rgba(255,255,255,0.2);
	transition: all .3s ease-in-out;
}
#mv .mv_scroll a:hover{
	padding-bottom: 80px;
}
#mv .mv_scroll a:hover::before{
	height: 50px;
}
#mv .mv_scroll a:hover::after{
	height: 25px;
}
#mv .mv_pointer{
	width: 200px;
	position: absolute;
	bottom: -40px;
	left: 5%;
	padding: 0;
}
#mv .mv_pointer li::before {
	background: rgba(255,255,255, 0.5);
}
#mv .mv_pointer li.current:before{
	background: rgba(255,255,255, 0.5);
}
#mv .mv_arrow {
	display: none;
}
@media screen and (max-height: 650px){
    #mv .mv_text > div::before{
        font-size: 7rem;
    }
    #mv .mv_text > div{
        padding-top: 120px;
    }
}
@media screen and (max-width: 100vh){
	#mv{
		height: 65vh;
	}
}
@media screen and (max-width: 1200px){
	#mv .mv_scroll{
		left: 30px;
	}
    #mv .mv_scroll{
		display: none;
	}
	#mv .mv_pointer{
		left: 10px;
        bottom: -28px;
	}
	#mv .mv_text{
		align-items: flex-end;
        top: auto;
        bottom: 20px;
	}
}
@media screen and (max-width: 900px){
    #mv_outer{
        padding-bottom: 40px;
    }
	#mv .mv_text > div{
		padding-top: 117px;
	}
	#mv .mv_text > div::before{
		font-size:7.0rem;
	}
}
@media screen and (max-width: 800px){
	#mv .mv_text p{
		padding-top: 0px;
	}
}
@media screen and (max-width: 650px){
	#mv .mv_text h2{
		font-size: 5.1vw !important;
	}
	#mv .mv_text > div{
		padding-left: 25px;
		padding-right: 25px;
		padding-top: 100px;
	}
	#mv .mv_text > div::before {
        left: 25px;
        font-size: 5.4rem;
	}
	
}
@media screen and (max-width: 600px){
	#mv .mv_text p{
		font-size: 1.6rem !important;
		letter-spacing: 0.1rem !important;
	}
	#mv .mv_text h2{
		line-height: 1.5;
		letter-spacing: 0.2rem;
	}
}
@media screen and (max-width: 480px){
	#mv .mv_text > div::before {
		font-size: 8.9vw;
		letter-spacing: -0.15rem;
	}
	#mv .mv_text h2{
		margin-bottom: 5px;
	}
    #mv .mv_text > div{
    padding-top: 19vw;
    }
}
@media screen and (max-width:400px){
  #mv .mv_text p {
    font-size: 4.0vw !important;
  }
}

@media screen and (max-width:375px){
  #mv .mv_text h2 {
    font-size: 4.6vw !important;
  }
}

type05

▼header

header{
	font-size: 1.4rem;
	color: #fff;
	background: var(--i_main_color);
}
header:before{
    content: "";
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 100vw 0 0;
    border-color: var(--i_main_color) transparent transparent transparent;
    z-index: 1;
}
header.open:before{
    border: none;    
}
body.scrolled header{
	box-shadow: 0 0 5px var(--i_shadow_color);
}
/*ヘッダーロゴの位置　Edge用*/
@supports (-ms-ime-align: auto) {
    header#pattern2 .logo {
        margin-top: 20px;
    }
}
header h1{
	line-height: 1.5;
	font-size: 1.3rem;
	font-weight: normal;
	opacity: 0.7;
}
body.scrolled header .logo{
	padding: 20px 0 !important;
}
header .logo,
header .logo a{
	max-width: 200px;
}
header .logo{
	padding: 20px 0 0;
}
body.scrolled header .logo a img{
	max-height: 70px;
	margin-top: 15px;
}
header .header_contents .header_col1{
	/* ▼水平方向レイアウト */
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	/* ▼垂直方向レイアウト */
	/*flex-direction: column;
	align-items: flex-end;*/
}
header .header_contents .header_col1 .tel{
	position: relative;
	font-size: 26px;
	line-height: 1;
	padding-left: 26px;


	font-weight: bold;
	font-weight: normal;
}
header .header_contents .header_col1 .tel svg,
header .header_contents .header_col1 .btn .translate a svg,
header .burger li.sp_translate a svg,
header .header_contents .header_sns li svg{
	fill: #ffffff;
}
header .sp_menu a div span,
header .sp_menu a div:before,
header .sp_menu a div:after{
	background: #ffffff;
}
.header_contents .header_col1 .tel a{
	color: #fff!important;
}
header .header_contents .header_col1 .tel svg{
	width: 22px;
	height: 22px;
	top: calc(50% - 11px);
	left: 0;
}
header .header_contents .header_col1 .btn>a{
	display: block;
	text-align: center;
	width: 150px;
	background: var(--i_btn_color);
	background: none;
	border: 1px solid rgba(255,255,255,.7);
	color: #fff !important;
	padding: 5px 10px;
}
header .header_contents .header_col1 .btn>a:hover{
	background: #fff;
	color: var(--i_btn_color) !important;
	border: 1px solid #fff;
    opacity: 1;
}

header .header_contents .header_col1 .btn .translate a svg{
	max-width: 74%;
	max-height: 74%;
	margin: 13% auto 0;
}
header .header_contents .header_col1 .btn .translate a:hover{
	opacity: 0.8;
}

header#pattern1 nav,
header#pattern3 nav{
	background: #eee;
}
header nav *{
	color: #fff;
	transition: 0.2s ease-in-out;
}
header nav ul.nav_1st{
	width: 100%;
	max-width: 1100px;/*任意*/
}
header nav ul.nav_1st>li{
	box-sizing: border-box;
	position: relative;
}
header nav ul.nav_1st>li:after{/*罫線*/
	content: "";
	width: 1px;
	height: 50%;
	position: absolute;
	top: 25%;
	left: 0;
	background: var(--i_border_color);
}
header nav ul.nav_1st>li:last-child:before{/*罫線*/
	content: "";
	width: 1px;
	height: 50%;
	position: absolute;
	top: 25%;
	right: 0;
	background: var(--i_border_color);
}
header nav ul.nav_1st>li>a{
	font-size: 1.4rem;
	font-weight: normal;
	position: relative;
	padding-left: 1vw;
	padding-right: 1vw;
}
header nav ul.nav_1st>li>a span{
	/*ナビの高さはline-heightで調整*/
	line-height: 3.5;/* マージン普通選択時 */
	color: #fff;
}
header#pattern2 nav ul.nav_1st>li>a span{
	line-height: 3;
	letter-spacing: 0.25rem;
}
body.margin header nav ul.nav_1st>li>a span{
	line-height: 4;/* マージン広い選択時 */
}
header nav ul.nav_1st>li>a:hover span{
	color: var(--i_btn_hover_txt_color);
}

header nav ul.nav_2nd{
	padding-top: 20px;
}
header nav ul.nav_1st>li:hover ul.nav_2nd{
	padding-top: 10px;
}
header nav ul.nav_2nd>li{
	background: rgba(41, 41, 41,0.8);
	border-bottom: 1px solid var(--i_border_color);
	box-shadow: 2px 2px 5px var(--i_shadow_color);
}
header nav ul.nav_2nd>li:hover{
	background: rgba(41, 41, 41,1);
}
header nav ul.nav_2nd>li:nth-last-of-type(1){
	border-bottom: none;
}
header nav ul.nav_2nd li a{
	padding: 10px 20px;
	font-weight:  normal;
	font-size: 1.4rem;
}
header nav ul.nav_2nd>li>a{
	padding-right: 30px;
}
header nav ul.nav_2nd>li>a:after{
	height: 5px;
	width: 5px;
	transform: rotate(-45deg);
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	top: calc(50% - 2.5px);
	right: 20px;
}
header nav ul.nav_3rd{
	padding-left: 20px;
}
header nav ul.nav_3nd li a{
	padding: 5px 20px;
}
header nav ul.nav_3rd>li>a:after{
	height: 1px;
	width: 4px;
	background: #fff;
	top: calc(50% - 0.5px);
	left: 5px;
}

@media screen and (max-width: 900px){
    body.scrolled header .logo a img{
        margin-top: 0;
    }
	header,
	header *,
	header nav ul.nav_2nd li a{
	}
	body.scrolled header .logo{
		padding: 10px 0 !important;
	}
	header.open:after,
	header .header_contents{
		background: var(--i_main_color);
	}
	header .burger li.sp_translate a svg{
		height: 28px;
		width: 28px;
		margin: 10% auto;
	}
	header .header_sns,
	header .header_contents .header_col1,
	header .header_contents .header_col2{
		border-top: 1px solid rgba(255,255,255,0.2);
		border-bottom: 1px solid rgba(0,0,0,0.2);
	}
	header .header_sns{
		border-bottom: none;
	}
	header .header_sns:empty,
	header .header_contents .header_col1:empty,
	header .header_contents .header_col2:empty{
		border: none;
	}
	header .header_contents .header_col1 .tel,
	header .header_contents .header_col1 .btn{
		float: none;
	}
	header .header_contents .header_col2{
		display: block !important;
	}
	header nav{
		border-bottom: 1px solid rgba(0,0,0,0.2);
	}
	header nav ul.nav_1st{
		border-bottom: 1px solid rgba(255,255,255,0.2);
		border-top: 1px solid rgba(0,0,0,0.2);
	}
	header nav ul.nav_1st li{
		border-bottom: 1px solid rgba(0,0,0,0.2);
		border-top: 1px solid rgba(255,255,255,0.15);
	}
	header nav ul.nav_1st>li:before,
	header nav ul.nav_1st>li:after{
		display: none !important;

	}
	header nav ul.nav_1st>li i:before,
	header nav ul.nav_1st>li i:after{
		background: #fff;
	}
	header nav ul.nav_2nd{
		border-top: 1px solid rgba(0,0,0,0.2);
	}
	header nav ul.nav_2nd>li{
		box-shadow: none;
	}
	header nav ul.nav_2nd>li *{
		color: #fff;
	}
	header nav ul.nav_3rd{
		border-top: 1px solid rgba(0,0,0,0.2);
	}
	header nav ul.nav_3rd>li:nth-last-of-type(1){
		border-bottom: none;
	}
	header .logo, header .logo a {
    	max-width: 180px;
	}
}

▼MV

#mv_outer{
	/*mvに背景とかはここを利用する*/
}
#mv{
	width: 100%;
	height: 100vh;
	min-height: 500px;
}
#mv:after{
	background: rgba(0,0,0,0.2);
	z-index: 7;
}
#mv:before{
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 180px 140vw;
    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 7;	
}
#mv .mv_text{
	height: 90%;
	align-items: center;/*垂直方向中央*/
	width: 100%;
	left: 0;
	bottom: 5%;
}
#mv .mv_text>div{
    box-sizing: border-box;
    width: 90%;
    color: #fff;
}
#mv .mv_text h2{
	font-size: 60px;/* ←max-font-size的意味合いで使用する。動作はjs。*/
	line-height: 1.1;
	letter-spacing: 0.4rem;
	font-weight: 500;
	font-size: 4rem !important;
	position: relative;
}
#mv .mv_text p{
	padding-top: 15px;
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: 0.3rem;
}
#mv .mv_pointer{
	text-align: right;
}
#mv .mv_pointer li:before{
	background: rgba(255,255,255,0.4);
}
#mv .mv_pointer li.current:before{
	background: rgba(255,255,255,0.8);
}
#mv .mv_arrow{
	display: none;
}
#mv .mv_scroll{
    width: 50px;
    height: auto;
    position: absolute;
    bottom: -30px;
	left: calc(50% - 25px);
	text-align: center;
}
#mv .mv_scroll a {
	padding-top: 95px;
	color: #fff;
}
#mv .mv_scroll a::before {
    content: "";
    display: block;
    width: 1px;
	height: 45px;
    position: absolute;
    left: calc(50% - 0.5px);
	top: 0;
	background-color: #d6d6d6;
	transform: rotate(0deg);
	-webkit-animation-name: ScrollDown;
	animation-name: ScrollDown;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
@-webkit-keyframes ScrollDown{
    0% {
        -webkit-transform: translateY(-100.5%);
        transform: translateY(-100.5%);
    }
    100% {
        -webkit-transform: translateY(100.5%);
        transform: translateY(100.5%);
    }
}
@keyframes ScrollDown{
    0% {
        -webkit-transform: translateY(-100.5%);
        transform: translateY(-100.5%);
    }
    100% {
        -webkit-transform: translateY(100.5%);
        transform: translateY(100.5%);
    }
}
@media screen and (max-height: 650px){
    #mv:before{
        border-width: 0 0 100px 140vw;
    }
}
@media screen and (max-width: 100vh){
	#mv{
		height: 78vh;
	}
}
@media screen and (max-width: 800px){
	#mv .mv_text p{
		padding-top: 10px;
	}
}
@media screen and (max-width: 600px){
	#mv .mv_text p{
		display: none;
	}
	#mv .mv_text h2{
		line-height: 1.5;
	}
	#mv .mv_text{
        bottom: 50px;
        height: calc(100% - 140px);
        align-items: center;/*垂直方向中央*/
	}
}
@media screen and (max-width: 500px){
    #mv .mv_text{
        height: 90%;        
    }
	#mv .mv_text h2{
		font-size: 5.5vw !important;
        letter-spacing: 0.1rem;
	}
}
@media screen and (max-width: 400px){
	#mv .mv_text>div{
		padding-left: 10px;
		padding-right: 10px;
	}
}

type06

#mv_outer{
	/*mvに背景とかはここを利用する*/
	position: relative;
}
#mv{
	width: 100%;
	height: 78vh;
	min-height: 500px;
}

#mv:before{
    position: absolute;
    display: block;
    content: "";
    width: 1%;
    height: 100%;
    top: 0;
    left: 15%;
    border-top: 80vh solid #fff;
    border-right: 20vh solid transparent;
    pointer-events: none;
    z-index: 7;
}
#mv:after{
	/*スライドに重ねる色*/
	pointer-events: none;
	width: 85%;
	left: 15%;
	right: 0;
	background: rgba(0,0,0,0);
}
#mv .mv_img li{
	width: 85%;
	left: 15%;
	right: 0;
}
#mv:before{
	position: absolute;
	display: block;
	content: "";
	pointer-events: none;
}
#mv .mv_text{
	bottom: 280px;
	height: calc(100% - 140px);
	top: 70px;
	align-items: flex-end;/*垂直方向中央*/
	width: 100% !important;
	left: 0 !important;
}


#mv .mv_text>div{
	max-width: none !important;
	box-sizing: border-box;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 140px;
	position: relative;
}

#mv .mv_text>div:before{
	position: absolute;
	display: inline-block;
	content: "GRAND OPEN!";
	white-space: pre;
	width: auto;
	height: auto;
	top: 0;
	left: 50px;
	line-height: 1.1;
	font-size: 9.0rem;
	letter-spacing: 0rem;
	pointer-events: none;
	font-weight: 800;
	color: var(--i_txt_color);
	animation: ani1 2s forwards;
	z-index: 1;
    background: #fff;
    padding: 15px 40px 15px 15px;
    clip-path: polygon(0 0, 100% 0%, 94% 100%, 0% 100%);/*contentの文字数によって角度が変わるので調整*/
}

#mv .mv_text h2{
	font-size: 3.4rem !important;/* ←max-font-size的意味合いで使用する。動作はjs。*/
	line-height: 1.2;
	font-weight: 600;
	animation: ani2 2s forwards;
	color: #fff;
    background: var(--i_main_color);
    display: inline-block;
    padding: 5px 25px 5px 15px;
    margin-bottom:10px;
    clip-path: polygon(0 0, 100% 0%, 97% 100%, 0% 100%);
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#mv .mv_text h2{
		animation:none;
	}
}
@keyframes ani1 {
  0% {
  transform: translateX(-1000px);
  }

  100% {
  transform: translateX(0px);
  }
}
@-moz-document url-prefix() {
  #mv .mv_text h2 {
    animation: ani2 2s forwards;
  }
}

#mv .mv_text p{
	font-size: 2rem;
	line-height: 1.8;
	font-weight: 600;
	letter-spacing: 0.1rem;
	animation: ani2 2s forwards;
	color: #fff;
    background: var(--i_main_color);
    display: table-cell;
    padding: 5px 25px 5px 15px;
    clip-path: polygon(0 0, 100% 0%, 97% 100%, 0% 100%);
}
@keyframes ani2 {
  0% {
  transform: translateX(700px);
  }

  100% {
  transform: translateX(0px);
  }
}
#mv_outer #mv .mv_text div p.static {
    display: table-cell !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#mv .mv_text p{
	animation:none;
}
}
@-moz-document url-prefix() {
  #mv .mv_text p {
    animation: ani2 2s forwards;
  }
}#mv .mv_scroll {
	width: 3px;
	height: auto;
	position: absolute;
	left: 25px;
	bottom:-17px;
}
#mv .mv_scroll a{
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: vertical-lr;
	font-weight: bold;
	font-size: 10px;
	position: relative;
	padding-bottom: 80px;
	height: auto;
	width: auto;
	text-indent: 0;
	potision: relative;
	transition: all .3s ease-in-out;
	text-align: right;
	color: rgba(255,255,255,0.2) !important;
	letter-spacing: 0.2rem;
	font-family: 'Oswald', sans-serif;
}
#mv .mv_scroll a::before {
	width: 1px;
	height: 70px;
	transform: none;
	position: absolute;
	bottom: -15px;
	left: 1px;
	top: auto;
	background: rgba(255,255,255,0.2);
	transition: all .3s ease-in-out;
}
#mv .mv_scroll a:hover{
	padding-bottom: 80px;
}
#mv .mv_scroll a:hover::before{
	height: 50px;
}
#mv .mv_scroll a:hover::after{
	height: 25px;
}
#mv .mv_pointer{
	width: 200px;
	position: absolute;
	bottom: -40px;
	left: 5%;
	padding: 0;
}
#mv .mv_pointer li::before {
	background: rgba(255,255,255, 0.5);
}
#mv .mv_pointer li.current:before{
	background: rgba(255,255,255, 0.5);
}
#mv .mv_arrow {
	display: none;
}
@media screen and (max-height: 650px){
    #mv .mv_text > div::before{
        font-size: 7rem;
    }
    #mv .mv_text > div{
        padding-top: 120px;
    }
}



@media screen and (max-width: 100vh){
	#mv{
		height: 65vh;
	}
}
@media screen and (max-width: 1200px){
	#mv .mv_scroll{
		left: 30px;
	}
    #mv .mv_scroll{
		display: none;
	}
	#mv .mv_pointer{
		left: 10px;
        bottom: -28px;
	}
	#mv .mv_text{
		align-items: flex-end;
        top: auto;
        bottom: 20px;
	}
}
@media screen and (max-width: 900px){
    #mv_outer{
        padding-bottom: 40px;
    }
	#mv .mv_text > div{
		padding-top: 117px;
	}
	#mv .mv_text > div::before{
		font-size:7.0rem;
	}
    #mv .mv_img li {
        width: 95%;
        left: 5%;
    }
    #mv::before{
        left: 5%;
        border-right: 14vh solid transparent;
    }
}
@media screen and (max-width: 800px){
	#mv .mv_text p{
		padding-top: 0px;
	}
}
@media screen and (max-width: 650px){
	#mv .mv_text h2{
		font-size: 5.4vw !important;
	}
	#mv .mv_text > div{
		padding-left: 25px;
		padding-right: 25px;
		padding-top: 100px;
	}
	#mv .mv_text > div::before {
        left: 25px;
        font-size: 5.3rem;
	}
	
}
@media screen and (max-width: 600px){
	#mv .mv_text p{
		font-size: 1.6rem !important;
		letter-spacing: 0rem !important;
	}
	#mv .mv_text h2{
		line-height: 1.5;
		letter-spacing: 0.2rem;
	}
}
@media screen and (max-width: 480px){
	#mv .mv_text > div::before {
		font-size: 8.9vw;
        padding: 10px 30px 10px 15px;
	}
	#mv .mv_text h2{
		margin-bottom: 5px;
	}
    #mv .mv_text > div{
        padding-top: 19vw;
    }
}

@media screen and (max-width:400px){
  #mv .mv_text p {
    font-size: 4.0vw !important;
  }
}

@media screen and (max-width:375px){
  #mv .mv_text h2 {
    font-size: 4.6vw !important;
  }
}

type07

▼base

#top.index::before {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 80%;
	height: 345px;
	background: var(--i_main_color);
	pointer-events: none;
	opacity: 0.7;
}
#top.index:before{
	height: 88vh;
}
@media screen and (max-width: 900px){
	#top.index::before {
		width: 70%;
	}
	#top.index:before{
		height: 75vh;
	}
}

▼MV

#mv_outer{
	/*mvに背景とかはここを利用する*/
	position: relative;
	padding-top: 5px;
}
#mv{
	width: 100%;
	height: 85vh;
	min-height: 500px;
	margin-left: 25%;
	transform: skewX(-20deg);
}
#mv:after{
	/*スライドに重ねる色*/
	pointer-events: none;
	z-index: 6;
	background: rgba(30,30,30,0.3);
	background: -moz-linear-gradient(90deg, rgba(30,30,30,0.3) 0%, rgba(76,86,86,0.15) 40%, rgba(30,30,30,0.05) 100%);
	background: -webkit-linear-gradient(90deg, rgba(30,30,30,0.3) 0%, rgba(76,86,86,0.15) 40%, rgba(30,30,30,0.05) 100%);
	background: linear-gradient(90deg, rgba(30,30,30,0.3) 0%, rgba(76,86,86,0.15) 40%, rgba(30,30,30,0.05) 100%);
}
#mv .mv_img li{
	transform: skewX(20deg);
	margin-left: -155px;
}
#mv .mv_text{
	height: 100%;
	align-items: center;/*垂直方向中央*/
	/*text-shadow: 0 0 5px var(--i_shadow_color);*/
	width: 100% !important;
	left: 0 !important;
	bottom: 5% !important;
	transform: skewX(20deg);
}

#mv .mv_text>div{
	max-width: none !important;
	box-sizing: border-box;
	width: 82%;
	margin-left: -18%;
	position: relative;
	padding-top: 180px;
}
#mv .mv_text>div::before {
	position: absolute;
	display: block;
	content: "DUMMY\A DUMMYTEXT";
	white-space: pre;
	font-weight: 500;
	font-family: "Outfit", sans-serif;
	font-size: 7.5rem;
 	top: 0;
	left: 0;
	text-align: left;
	color: #fff;
	pointer-events: none;
	letter-spacing: 0.5rem;
    line-height: 1.1;
}
#mv .mv_text h2{
	font-size: 60px;/* ←max-font-size的意味合いで使用する。動作はjs。*/
	line-height: 1.3;
	letter-spacing: 0.2rem;
	font-weight:600;
	font-size: 3.6rem !important;
	position: relative;
	display: inline-block;
	color:#fff;
	border-top: 3px solid #fff;
	padding-top: 25px;
}
#mv .mv_text p{
	padding-top: 10px;
	font-size: 2.1rem;	
	font-weight: 600;
	letter-spacing: 0.2rem;
	color:#fff;
}
#mv .mv_scroll {
	display: none
}
#mv .mv_pointer {
	bottom: 10px;
	text-align: left;
}
#mv .mv_pointer li:before{
	background: rgba(255, 255, 255, 0.3);
}
#mv .mv_pointer li.current:before{
	background: rgba(255, 255, 255, 0.8);
}
#mv .mv_arrow {
	display: none;
}
@media screen and (max-width: 100vh){
	#mv{
		height: 85vh;
	}
}
@media screen and (max-width: 900px){
	#mv_outer{
		padding-top: 0;
	}
	#mv:after{
		background: rgba(30,30,30,0.3);
	}
	#mv .mv_text>div {
    	width: 90%;
    	margin-left: -23%;
		padding-top: 150px;
	}
	#mv .mv_text>div::before {
    	font-size: 6rem;
	}
	#mv .mv_text h2{
		padding-top: 15px;
	}
}
@media screen and (max-width: 700px){
	#mv .mv_img li {
    	margin-left: -90px;
	}
}
@media screen and (max-width: 600px){
	#mv .mv_text h2{
		line-height: 1.5;
	}
	#mv .mv_text p{
		padding-top: 8px;
		font-size: 1.6rem;
		letter-spacing: 0.1rem;
	}
	#mv .mv_img li{
		width: 100%;
	}
	#mv .mv_text>div::before {
    	font-size: 3.8rem;
	}
	#mv .mv_text>div {
		padding-top: 92px;
	}
}
@media screen and (max-width: 650px){
	#mv .mv_text h2{
		font-size: 5.8vw !important;
		letter-spacing: 0.1rem;
	}
}

type08

wave1.pngをダウンロード
wave2.pngをダウンロード

#mv_outer{
	/*mvに背景とかはここを利用する*/
	position: relative;
	padding-top: 5px;
}
#mv_outer::before{
	content: "";
	display: block;
	width: 100%;
	height:57px;
	position: absolute;
	bottom: -1px;
	left: 0;
	pointer-events: none;
	background: url(/common/upload_data/hoge/image/wave1.png);
	z-index: 8;
	background-position: 0 0;
	animation-duration: 12s;
	background-size: 1280px auto;
	background-repeat: repeat-x;
	animation-name: wave;
	animation-iteration-count: infinite;
	animation-timing-function:linear;
}
#mv_outer::after{
	content: "";
	display: block;
	width: 100%;
	height: 57px;
	position: absolute;
	bottom: 0;
	top:auto;
	left: 0;
	pointer-events: none;
	background: url(/common/upload_data/hoge/image/wave2.png);
	z-index: 8;
	background-position: 0 0;
	animation-duration: 30s;
	background-size: 1280px auto;
	background-repeat: repeat-x;
	animation-name: wave;
	animation-iteration-count: infinite;
	animation-timing-function:linear;
}
@keyframes wave{
	0% {
  		background-position: 0 0;
	}
	100% {
  		background-position: 1280px 0;
	}
}
#mv{
	width: 100%;
	height:80vh;
	min-height: 500px;
}
#mv:after{
	/*スライドに重ねる色*/
	pointer-events: none;
	z-index: 6;
	background: rgba(120,120,120,0.3);
	background: -moz-linear-gradient(90deg, rgba(120,120,120,0.4) 0%, rgba(76,86,86,0.25) 40%, rgba(120,120,120,0.05) 100%);
	background: -webkit-linear-gradient(90deg, rgba(120,120,120,0.4) 0%, rgba(76,86,86,0.25) 40%, rgba(120,120,120,0.05) 100%);
	background: linear-gradient(90deg, rgba(120,120,120,0.4) 0%, rgba(76,86,86,0.25) 40%, rgba(120,120,120,0.05) 100%);
}
#mv .mv_text{
	height: 100%;
	align-items: flex-end;/*垂直方向中央*/
	width: 100% !important;
	left: 0 !important;
	bottom: 18% !important;
}
#mv .mv_text>div{
	max-width: none !important;
	box-sizing: border-box;
	width: 90%;
	margin-left: 8%;
}
#mv .mv_text h2{
	font-size: 60px;/* ←max-font-size的意味合いで使用する。動作はjs。*/
	line-height: 1.1;
	letter-spacing: 0.2rem;
	font-weight: 500;
	font-size: 3.6rem !important;
	position: relative;
	display: inline-block;
	color:#fff;
	border-bottom: double 3px rgba(255,255,255,0.8);
	padding-bottom: 18px;
}
#mv .mv_text p{
	padding-top: 10px;
	font-size: 2.1rem;	
	font-weight: 500;
	letter-spacing: 0.2rem;
	color:#fff;
}
#mv .mv_scroll {
	width: 3px;
	height: auto;
	position: absolute;
	left: 3vw;
	bottom:0;
}
#mv .mv_scroll a{
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: vertical-lr;
	font-weight: 500;
	font-size: 10px;
	position: relative;
	padding-bottom: 100px;
	height: auto;
	width: auto;
	text-indent: 0;
	potision: relative;
	transition: all .3s ease-in-out;
	text-align: right;
	color: #dedede !important;
	letter-spacing:0.5rem;
	font-family: 'Noto Serif JP', "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
#mv .mv_scroll a::before {
    width: 1px;
    height: 70px;
    transform: none;
    position: absolute;
    bottom: 0;
    left: 1px;
	top: auto;
	background: #dedede;
	transition: all .3s ease-in-out;
}
#mv .mv_scroll a:hover{
	padding-bottom: 80px;
}
#mv .mv_scroll a:hover::before{
    height: 50px;
}
#mv .mv_scroll a:hover::after{
    height: 25px;
}
#mv .mv_pointer {
	bottom: -10px;
	text-align: right;
}
#mv .mv_pointer li:before{
	background: rgba(120,120,120,0.3);
}
#mv .mv_pointer li.current:before{
	background: rgba(120,120,120,0.8);
}
#mv .mv_arrow {
	display: none;
}
@media screen and (max-width: 100vh){
	#mv{
		height: 78vh;
	}
}
@media screen and (max-width: 900px){
	#mv_outer{
		padding-top: 0;
	}
}
@media screen and (max-width: 600px){
	#mv .mv_text h2{
		line-height: 1.5;
	}
	#mv .mv_text p{
		padding-top: 8px;
		font-size: 1.6rem;
		letter-spacing: 0.1rem;
	}
	#mv .mv_scroll{
		display: none;
	}
	#mv:after{
		background: rgba(120,120,120,0.3);
	}
	#mv .mv_img li{
		width: 100%;
		margin-left: 0%;
	}
	#mv:after{
		width: 100%;
		margin-left: 0%;
	}
}
@media screen and (max-width: 650px){
	#mv .mv_text h2{
		font-size: 5.8vw !important;
		letter-spacing: 0.1rem;
		padding-bottom: 10px;
	}
}

type09

#mv_outer{
	/*mvに背景とかはここを利用する*/
	position: relative;
}
#mv{
	width: 100%;
	height: 82vh;
	min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#mv:after{
	/*スライドに重ねる色*/
	pointer-events: none;
	z-index: 6;
}
#mv .mv_img{
    border-radius: 50%;
    width: 650px;
    height: 650px;
    box-shadow: 10px 10px 15px var(--i_shadow_color);
}
#mv .mv_text{
	height: 100%;
	align-items: center;/*垂直方向中央*/
	width: 100% !important;
	left: 0 !important;
	bottom: 0 !important;
}
#mv .mv_text>div{
	max-width: none !important;
	box-sizing: border-box;
	width: 100%;
	position: relative;
	color: var(--i_txt_color);
}
#mv .mv_text h2{
	font-size: 60px;/* ←max-font-size的意味合いで使用する。動作はjs。*/
	line-height: 1.1;
	letter-spacing: 0rem;
	font-size: 2.55vw !important;
	position: relative;
	display: inline-block;
}
#mv .mv_text p{
	padding-top: 15px;
	font-size: 1.7vw;	
	letter-spacing: 0rem;
}
#mv .mv_pointer {
	width: auto;
	position: absolute;
	bottom: 22%;
	left: 10%;
	padding: 0;
	text-align: left;
}
#mv .mv_pointer li{
	width: 8px !important;
	height: 30px;
	margin: 0 40px 0 0;
	border-radius: 50px;
}
#mv .mv_pointer li:last-of-type{
	margin: 0;
}
#mv .mv_pointer li::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	margin-top: 10px;
    border: 2px solid var(--i_main_color);
	border-radius: 50px;
}
#mv .mv_pointer li.current{
	width: 8px !important;
}
#mv .mv_pointer li.current:before{
	background: var(--i_main_color);
}
#mv .mv_scroll,
#mv .mv_arrow{
	display: none;
}
@media screen and (max-height: 750px){
    #mv .mv_img{
        width: 500px;
        height: 500px;
    }
}
@media screen and (max-height: 600px) and (min-width: 901px){
    #mv_outer{
        padding-top: 60px;
    }
}
@media screen and (min-width: 1921px){
    #mv .mv_text h2{
        font-size: 5rem !important;
    }
    #mv .mv_text p{
        font-size: 3rem;
    }
}
@media screen and (min-width: 901px){
    #mv{
        width: 95%;
        max-width: 1920px;
        margin: auto;
    }
    #mv .mv_img{
        margin-left: calc(50% - 325px + 10%);
    }
    #mv .mv_text{
        width: 50% !important;
        padding-left: 10%;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 1400px) and (min-width: 901px){
    #mv .mv_img{
        margin-left: auto;
    }
    #mv .mv_text{
        padding-left: 0%;
    }
    #mv .mv_pointer{
        left: 0;
    }
}
@media screen and (max-width: 900px){
    #mv_outer{
        padding-bottom: 120px;
    }
    #mv{
        height: 100%;
        align-items: flex-end;
    }
    #mv .mv_text{
        align-items: flex-end;
        bottom: -120px !important;
    }
    #mv .mv_text > div{
        width: 95%;
    }
	#mv .mv_text h2{
		font-size: 5.8vw !important;
		line-height: 1.5;
		letter-spacing: 0;
	}
	#mv .mv_text p{
        padding-top: 5px;
		font-size: 2rem;
		letter-spacing: 0;
	}
    #mv .mv_img{
        width: 420px;
        height: 420px;
    }
    #mv .mv_pointer{
        bottom: -10px;
        left: auto;
        right: 5%;
    }
    #mv .mv_pointer li{
        margin-right: 25px;
    }
    #mv .mv_pointer li::before{
        width: 5px;
        height: 5px;
    }
}
@media screen and (max-width: 420px){
    #mv .mv_img{
        width: 320px;
        height: 320px;
    }
    #mv .mv_pointer{
        bottom: -22px;
    }
}

type10

@import url('https://fonts.googleapis.com/css2?family=Gwendolyn:wght@400;700&display=swap');
/*---------------------*/
#mv_outer{
	position: relative;
	padding-top: 220px;
}
#mv_outer:before{
    position: absolute;
    display: block;
    content: "Total beauty salon";
    font-family: "Gwendolyn", cursive;
    font-size: 11.0rem;
    top: 95px;
    right: 80px;
    z-index: 8;
    pointer-events: none;
    color: var(--i_sub_color);
    letter-spacing: 0;
    transform: skew(-5deg,-10deg);
}
#mv{
	width: 100%;
	height: 60vh;
	min-height: 500px;
}
#mv:after{
	pointer-events: none;
	background: rgba(54, 63, 72, 0.13);
}
#mv .mv_text{
	height: 220px;
	align-items: center;/*垂直方向中央*/
	width: 100% !important;
	left: 0 !important;
	top: -220px;
}
#mv .mv_text>div{
	max-width: none !important;
	box-sizing: border-box;
	width: 85%;
	color: var(--i_main_color);
}
#mv .mv_text h2{
	font-size: 60px;/* ←max-font-size的意味合いで使用する。動作はjs。*/
	line-height: 1.1;
	letter-spacing: 0.2rem;
	font-weight: 400;
	font-size: 4.0rem !important;
	color: var(--i_txt_color);
	position: relative;
}
#mv .mv_text p{
	padding-top: 10px;
	font-size: 2.5rem;
	font-weight:500;
	letter-spacing: 0.2rem;
}
#mv .mv_scroll {
	width: 3px;
	height: auto;
	position: absolute;
	right: 20px;
	left: auto;
	bottom:0;
}
#mv .mv_scroll a{
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: vertical-lr;
	letter-spacing: 0.3em;
	font-weight: bold;
	font-size: 10px;
	position: relative;
	padding-bottom: 100px;
	height: auto;
	width: auto;
	text-indent: 0;
	potision: relative;
	transition: all .3s ease-in-out;
	text-align: right;
	color: #fff !important;
	font-family: 'Raleway', sans-serif;
	letter-spacing: 1rem;
}
#mv .mv_scroll a::before {
    width: 1px;
    height: 70px;
    transform: none;
    position: absolute;
    bottom: 0;
    left: 1px;
	top: auto;
	background: #fff;
	transition: all .3s ease-in-out;
}
#mv .mv_scroll a:hover{
	padding-bottom: 80px;
}
#mv .mv_scroll a:hover::before{
    height: 50px;
}
#mv .mv_scroll a:hover::after{
    height: 25px;
}
#mv .mv_pointer{
	display: none;
}
#mv .mv_arrow {
	display: none;
}
@media screen and (max-width: 1300px){
    #mv_outer:before{
        font-size: 9.5rem;
    }
}
@media screen and (max-width: 100vh){
	#mv{
		height: 65vh;
	}
}
@media screen and (max-width: 900px){
	#mv .mv_text > div{
		width: 95%;
	}
	#mv_outer:before{
        top: 125px;
        right: 20px; 
        font-size: 10vw;
	}
}
@media screen and (max-width: 800px){
	#mv .mv_text p{
		padding-top: 10px;
	}
	#mv_outer{
		padding-top: 150px;
	}
	#mv_outer:before{
		top: 100px;
	}
    #mv .mv_text{
        height: 150px;
        top: -150px;
    }
}
@media screen and (max-width: 600px){
	#mv .mv_text h2{
		line-height: 1.5;
	}
}
@media screen and (max-width: 650px){
	#mv .mv_text h2{
		font-size: 6vw !important;
		letter-spacing: 0rem;
	}
}
@media screen and (max-width: 450px){
    #mv_outer:before {
        top: 100px;
    }
    #mv .mv_text{
        text-align: center;
    }
}

type11

#mv_outer{
	/*mvに背景とかはここを利用する*/
	position: relative;
    padding-top: 10px;
    padding-bottom: 5vh;

}
#mv_outer::before{
	display: block;
	content: "";
	width: 100%;
	height: 50%;
	position: absolute;
	bottom: 0;
	left: 0;
	background: var(--i_sub2_color);
	pointer-events: none;
}
#mv{
	width: 100%;
	height: 80vh;
	min-height: 500px;
}
#mv:after{
	/*スライドに重ねる色*/
	pointer-events: none;
	background: rgba(0, 0, 0, 0);
}
#mv.slide06 ul.mv_img li,
#mv.slide07 ul.mv_img li{
  width: 49% !important;
  height: 70vh;
}

#mv.slide06 ul.mv_img li.r,
#mv.slide07 ul.mv_img li.r{
	width: 45% !important;
	left: 57% !important;
	top: 7vh;
	height: 70vh;
}
#mv .mv_text{
	height: 90%;
	align-items: flex-end;/*垂直方向中央*/
	width: 100% !important;
	left: 0 !important;
	bottom: 5% !important;
}
#mv .mv_text>div{
	max-width: none !important;
	box-sizing: border-box;
	width: 90%;
	/*! position: relative; */
	color: var(--i_txt_color);
}
#mv .mv_text h2{
	font-size: 60px;/* ←max-font-size的意味合いで使用する。動作はjs。*/
	line-height: 1.1;
	letter-spacing: 0.3rem;
	font-weight: 600;
	font-size: 3.5rem !important;
	position: relative;
	background: #fff;
	display: inline-block;
	padding: 20px;
	margin-bottom: 10px;
}
#mv .mv_text p{
	padding-top: 15px;
	font-size: 1.8rem;
	font-weight: 600;
	letter-spacing: 0.3rem;
	background: #fff;
	padding: 10px 20px;
	position: absolute;
}
#mv .mv_scroll {
	width: 3px;
	height: auto;
	position: absolute;
	right: 50px;
	left: auto;
	bottom:0;
}
#mv .mv_scroll a{
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: vertical-lr;
	letter-spacing: 0.3em;
	font-size: 11px;
	position: relative;
	padding-bottom: 100px;
	height: auto;
	width: auto;
	text-indent: 0;
	potision: relative;
	transition: all .3s ease-in-out;
	text-align: right;
	font-weight: 600;
	color: #fff;
}
#mv .mv_scroll a::before {
	width: 1px;
	height: 70px;
	transform: none;
	position: absolute;
	bottom: 0;
	left: 1px;
	top: auto;
	background: #fff;
	transition: all .3s ease-in-out;
}
#mv .mv_scroll a:hover{
	padding-bottom: 80px;
}
#mv .mv_scroll a:hover::before{
	height: 50px;
}
#mv .mv_scroll a:hover::after{
	height: 25px;
}
#mv .mv_pointer,
#mv .mv_arrow {
	display: none;
}
@media screen and (max-height: 630px){
    #mv{
        height: 72vh;
    }
}

@media screen and (max-width: 100vh){
	#mv{
		height: 65vh;
	}
}
@media screen and (max-width: 900px){
    #mv_outer{
        padding-top: 0;
        padding-bottom: 5vh;
	}
    #mv.slide06 ul.mv_img li,
    #mv.slide06 ul.mv_img li.r,
    #mv.slide07 ul.mv_img li,
    #mv.slide07 ul.mv_img li.r{
        width: 85% !important;
        left: 0 !important;
        top: 0;
        height: 65vh;
    }
    #mv .mv_scroll{
        right: 20px;
    }
	#mv .mv_scroll a{
		color: var(--i_txt_color);
        font-size: 1.1rem;
	}
	#mv .mv_scroll a::before {
		background: var(--i_txt_color);
	}
}
@media screen and (max-width: 600px){
	#mv .mv_scroll{
		bottom: 110px;
	}
	#mv .mv_text h2{
		font-size: 5.4vw !important;
		letter-spacing: 0.1rem;
		line-height: 1.5;
		padding: 10px;
	}
	#mv .mv_text p{
		font-size: 1.5rem !important;
		letter-spacing: 0.1rem;
		padding: 10px;
	}
}

type12

▼header

header{
	font-size: 1.4rem;
	color: #fff;
	background: transparent;
}
.scrolled header{
	background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
	color: #000;
}
.scrolled header .logo a img{
    filter: none;
}
/*ヘッダーロゴの位置　Edge用*/
@supports (-ms-ime-align: auto) {
header#pattern2 .logo {
	margin-top: 20px;
}
}

header h1{
	line-height: 1.5;
	font-size: 1.3rem;
	font-weight: normal;
	opacity: 0.7;
}

body.scrolled header .logo{
	padding: 20px 0 !important;
}
header .logo,
header .logo a{
	max-width: 120px;
}
header .logo{
	padding: 0;
	margin-top: -50px;
}
body.scrolled header .logo{
	margin-top: 0
}
body.scrolled header .logo a img{
	max-height: 70px;
    filter: invert(100%);
}
header .header_contents .header_col1{
	/* ▼水平方向レイアウト */
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	/* ▼垂直方向レイアウト */
	/*flex-direction: column;
	align-items: flex-end;*/
}
header .header_contents .header_col1 .tel{
	position: relative;
	font-size: 23px;
	line-height: 1;
	padding-left: 26px;
	font-weight: bold;
	font-weight: normal;
}
header .header_contents .header_col1 .tel svg,
header .header_contents .header_col1 .btn .translate a svg,
header .burger li.sp_translate a svg,
header .header_contents .header_sns li svg{
	fill: #ffffff;
}
body.scrolled header .header_contents .header_col1 .tel svg,
body.scrolled header .header_contents .header_col1 .btn .translate a svg,
body.scrolled header .burger li.sp_translate a svg,
body.scrolled header .header_contents .header_sns li svg{
	fill: #000;
}
header .sp_menu a div span,
header .sp_menu a div:before,
header .sp_menu a div:after{
	background: #fff;
}
body.scrolled header .sp_menu a div span,
body.scrolled header .sp_menu a div:before,
body.scrolled header .sp_menu a div:after{
	background: #000;
}
.header_contents .header_col1 .tel a{
	color: #fff!important;
}
body.scrolled header .header_contents .header_col1 .tel a{
	color: #000!important;
}
header .header_contents .header_col1 .tel svg{
	width: 18px;
	height: 18px;
	top: calc(50% - 7px);
	left: 0;
}
header .header_contents .header_col1 .btn>a{
	display: block;
	text-align: center;
	width: 150px;
	background: var(--i_btn_color);
	background: none;
	border: 1px solid rgba(255,255,255,.7);
	color: #fff !important;
	padding: 5px 10px;
	border-radius: 100px;
	font-weight: 600;
}
body.scrolled header .header_contents .header_col1 .btn>a{
	border: 1px solid rgba(0,0,0,.5);
	color: #000 !important;
}
header .header_contents .header_col1 .btn>a:hover{
	background: #fff;
	color: #000 !important;
	border: 1px solid #fff;
    opacity: 1;
}
body.scrolled header .header_contents .header_col1 .btn>a:hover{
	border: 1px solid rgba(0, 0, 0, 0.7);
	opacity: 0.6;
}
header .header_contents .header_col1 .btn .translate a svg{
	max-width: 74%;
	max-height: 74%;
	margin: 13% auto 0;
}
header .header_contents .header_col1 .btn .translate a:hover{
	opacity: 0.8;
}

header#pattern1 nav,
header#pattern3 nav{
	background: #eee;
}
header nav *{
	color: #fff;
	transition: 0.2s ease-in-out;
}
header nav ul.nav_1st{
	width: 37% !important;
	max-width: 1100px;/*任意*/
	align-items: normal !important;
	margin-top: 30px !important;
	flex-direction: row-reverse;
}
body.scrolled header nav ul.nav_1st{
	width: 85% !important;    
}
body.scrolled header nav ul.nav_1st {
    min-height: 50px !important;
}
header nav ul.nav_1st>li{
	box-sizing: border-box;
	position: relative;
}

header nav ul.nav_1st>li>a{
	font-size: 1.5rem;
	font-weight: 800;
	position: relative;
	padding-left: 1vw;
	padding-right: 1vw;
}
header nav ul.nav_1st>li>a span{
	/*ナビの高さはline-heightで調整*/
	line-height: 3.5;/* マージン普通選択時 */
	color: #fff;
}
body.scrolled header#pattern2 nav ul.nav_1st>li>a span{
	color: #000;
	writing-mode: horizontal-tb;
}
header#pattern2 nav ul.nav_1st>li>a span{
	line-height: 3;
	letter-spacing: 0.25rem;
	writing-mode: vertical-rl;
}
body.margin header nav ul.nav_1st>li>a span{
	line-height: 4;/* マージン広い選択時 */
}
body.scrolled header nav ul.nav_1st>li:after{/*罫線*/
	content: "";
	width: 1px;
	height: 45%;
	position: absolute;
	top: 25%;
	left: 0;
	border-left: 1px solid rgba(0, 0, 0, 0.13);
	transform: rotate(25deg);
}
body.scrolled header nav ul.nav_1st>li:last-child:before{/*罫線*/
	content: "";
	width: 1px;
	height: 45%;
	position: absolute;
	top: 25%;
	right: 0;
	border-left: 1px solid rgba(0, 0, 0, 0.13);
	transform: rotate(25deg);
}
header nav ul.nav_2nd{
	padding-top: 20px;
}
header nav ul.nav_1st>li:hover ul.nav_2nd{
	padding-top: 10px;
}
header nav ul.nav_2nd>li{
	background: rgba(17, 17, 17, 0.85);
	border-bottom: 1px solid var(--i_border_color);
	box-shadow: 2px 2px 5px var(--i_shadow_color);
}
header nav ul.nav_2nd>li:hover{
	background: rgba(0, 77, 153, 0.8);
}
header nav ul.nav_2nd>li:nth-last-of-type(1){
	border-bottom: none;
}
header nav ul.nav_2nd li a{
	padding: 10px 20px;
	font-weight:  normal;
	font-size: 1.4rem;
}
header nav ul.nav_2nd>li>a{
	padding-right: 30px;
}

header nav ul.nav_2nd>li>a:after{
	height: 5px;
	width: 5px;
	transform: rotate(-45deg);
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	top: calc(50% - 2.5px);
	right: 20px;
}
header nav ul.nav_3rd{
	padding-left: 20px;
}
header nav ul.nav_3nd li a{
	padding: 5px 20px;
}
header nav ul.nav_3rd>li>a:after{
	height: 1px;
	width: 4px;
	background: #fff;
	top: calc(50% - 0.5px);
	left: 5px;
}
@media screen and (max-width: 900px){
    header .logo{
        margin-top: 0;
    }
    header#pattern2 nav ul.nav_1st > li > a span{
        writing-mode: horizontal-tb;
    }
    header nav ul.nav_1st,
    body.scrolled header nav ul.nav_1st{
        width: auto !important;
    }
    body.scrolled header nav ul.nav_3rd>li>a:after{
        background: #000;    
    }    
    header .logo a img{
        max-height: 80px !important;
        transition: 0.3s ease-in-out;
    }
    body.scrolled header .logo a img{
        max-height: 50px !important;
        transition: 0.3s ease-in-out;
        margin-top: 0;
    }
	header,
	header *,
	header nav ul.nav_2nd li a{
	}
	body.scrolled header .logo{
		padding: 10px 0 !important;
	}
	header.open:after,
	header .header_contents{
		background: rgba(17, 17, 17,0.95);
	}
	body.scrolled header.open:after,
	body.scrolled header .header_contents{
		background: rgba(255,255,255,0.95);
	}    
	header .burger li.sp_translate a svg{
		height: 28px;
		width: 28px;
		margin: 10% auto;
	}
	header .header_sns,
	header .header_contents .header_col1,
	header .header_contents .header_col2{
		border-top: 1px solid rgba(255,255,255,0.2);
		border-bottom: 1px solid rgba(0,0,0,0.2);
	}
	header .header_sns{
		border-bottom: none;
	}
	header .header_sns:empty,
	header .header_contents .header_col1:empty,
	header .header_contents .header_col2:empty{
		border: none;
	}
	header .header_contents .header_col1 .tel,
	header .header_contents .header_col1 .btn{
		float: none;
	}
	header .header_contents .header_col2{
		display: block !important;
	}
	header nav{
		border-bottom: 1px solid rgba(0,0,0,0.2);
	}
	header nav ul.nav_1st{
		border-bottom: 1px solid rgba(255,255,255,0.2);
		border-top: 1px solid rgba(0,0,0,0.2);
	}
	header nav ul.nav_1st li{
		border-bottom: 1px solid rgba(0,0,0,0.2);
		border-top: 1px solid rgba(255,255,255,0.15);
		flex-direction: row;
	}
	header nav ul.nav_1st>li:before,
	header nav ul.nav_1st>li:after{
		display: none !important;

	}
	body.scrolled header nav ul.nav_1st>li i:before,
	body.scrolled header nav ul.nav_1st>li i:after{
		background: var(--i_main_color);
	}
	header nav ul.nav_1st>li i:before,
	header nav ul.nav_1st>li i:after{
		background: #fff;
	}    
	header nav ul.nav_2nd{
		border-top: 1px solid rgba(0,0,0,0.2);
	}
	header nav ul.nav_2nd>li{
		box-shadow: none;
	}
	header nav ul.nav_2nd>li *{
		color: #fff;
	}
	body.scrolled header nav ul.nav_2nd>li *{
		color: #000;
	}    
	header nav ul.nav_3rd{
		border-top: 1px solid rgba(0,0,0,0.2);
	}
	header nav ul.nav_3rd>li:nth-last-of-type(1){
		border-bottom: none;
	}
	header .logo, header .logo a {
    	max-width: 180px;
	}
}

▼MV

#mv_outer{
	/*mvに背景とかはここを利用する*/
	background: #d3d3d3;
}
#mv{
	width: 100%;
	height: 100vh;
	min-height: 500px;
}
#mv:after{
	background-size: auto;
	z-index: 7;
	background: rgba(0, 0, 0, 0.3);
}
#mv .mv_text{
	height: 70%;
	align-items: center;/*垂直方向中央*/
	width: 100% !important;
	left: 0 !important;


	bottom: 0px!important;
}
#mv .mv_text>div{
	box-sizing: border-box;
	width: 95%;
	color: #fff;
	margin-right: auto !important;
}
#mv .mv_text h2{
	font-size: 60px;/* ←max-font-size的意味合いで使用する。動作はjs。*/
	line-height: 1.1;
	letter-spacing: 0.4rem;
	font-weight: 800;
	font-size: 4rem !important;
	position: relative;
}
#mv .mv_text p{
	padding-top: 15px;
	font-size: 2.2rem;
	font-weight: 600;
	letter-spacing: 0.3rem;
}
#mv .mv_pointer{
	text-align: right;
}
#mv .mv_pointer li:before{
	background: rgba(255,255,255,0.4);
}
#mv .mv_pointer li.current:before{
	background: rgba(255,255,255,0.8);
}
#mv .mv_arrow{
	display: none;
}

#mv .mv_scroll{
    width: 50px;
    height: auto;
    position: absolute;
    bottom: -30px;
	left: calc(50% - 25px);

	text-align: center;
}
#mv .mv_scroll a {
	padding-top: 95px;
	color: #fff;
}
#mv .mv_scroll a::before {
    content: "";
    display: block;
    width: 1px;
	height: 45px;
    position: absolute;
    left: calc(50% - 0.5px);
	top: 0;
	background-color: #d6d6d6;
	transform: rotate(0deg);
	-webkit-animation-name: ScrollDown;
	animation-name: ScrollDown;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
@-webkit-keyframes ScrollDown{
    0% {
        -webkit-transform: translateY(-100.5%);
        transform: translateY(-100.5%);
    }
    100% {
        -webkit-transform: translateY(100.5%);
        transform: translateY(100.5%);
    }
}
@keyframes ScrollDown{
    0% {
        -webkit-transform: translateY(-100.5%);
        transform: translateY(-100.5%);
    }
    100% {
        -webkit-transform: translateY(100.5%);
        transform: translateY(100.5%);
    }
}
@media screen and (max-height: 780px){
    #mv .mv_text {
        height: 50%;
    }
}
@media screen and (max-width: 100vh){
	#mv{
		height: 75vh;
	}
}
@media screen and (max-width: 800px){
	#mv .mv_text p{
		padding-top: 10px;
	}
}
@media screen and (max-width: 600px){
	#mv .mv_text p{
		display: none;
	}
	#mv .mv_text h2{
		line-height: 1.5;
	}
	#mv .mv_text{
	bottom: 50px !important;
	height: calc(100% - 140px);
	align-items: center;/*垂直方向中央*/
	}
    #mv .mv_text h2:before{
        font-size: 7rem;
        top: -21rem;
    }
    #mv_outer #mv .mv_text div p.static{
        font-size: 1.4rem;
    }
}
@media screen and (max-width: 500px){
    #mv:after{
        background-size: 50%;
    }
	#mv .mv_text h2{
		font-size: 5.5vw !important;
        letter-spacing: 0.1rem;
	}
}
@media screen and (max-width: 450px){
	#mv .mv_text>div{
		padding-left: 10px;
		padding-right: 10px;
        text-align: center;
	}
    #mv .mv_text h2:before{
       font-size: 5rem;
        top: -15rem; 
    }
}

type13

mv_top.pngをダウンロード
icon.pngをダウンロード（または作成）

▼header

header{
	font-size: 1.4rem;
	color: var(--i_txt_color);
}
header .wraper{
	max-width: 1700px;
}
body.scrolled header{
	background: rgba(255,255,255, 0.9);
	box-shadow: 0 0 5px var(--i_shadow_color);
}
header#pattern2:not(.width_full) nav{
	max-width: 1740px;
}

header h1{
	line-height: 1.5;
	font-size: 1.3rem;
	font-weight: normal;
	opacity: 0.7;
	fill: var(--i_txt_color);
}
body.scrolled header .logo{
	padding: 20px 0 !important;
}
header .logo,
header .logo a,
header .logo a img{
	max-width: 120px;
	border-radius: 0;
}
.index header .logo a img{
	max-width: 160px;
}
.index header .logo{
	position: absolute!important;
	top: 110px!important;
	left: 5%!important;
	padding: 0px;
}
body.scrolled header .logo{
	position: inherit;
	top: 0!important;
	left: auto!important;
}
body.scrolled header .logo a img{
	max-height: 85px;
}
header .header_contents .header_col1{
	/* ▼水平方向レイアウト */
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	/* ▼垂直方向レイアウト */
	/*flex-direction: column;
	align-items: flex-end;*/
}
header .header_contents .header_col1 .tel{
	position: relative;
	font-size: 28px;
	line-height: 1;
	padding-left: 26px;
	fill: var(--i_txt_color);
    font-weight: 500;
}
header .header_contents .header_col1 .tel svg,
header .header_contents .header_col1 .btn .translate a svg,
header .burger li.sp_translate a svg,
header .header_contents .header_sns li svg{
	fill:var(--i_txt_color);
}
header .sp_menu a div span,
header .sp_menu a div:before,
header .sp_menu a div:after{
	background: var(--i_txt_color);
}
header .header_contents .header_col1 .tel svg{
	width: 22px;
	height: 22px;
	top: calc(50% - 11px);
	left: 0;
}
header .header_contents .header_col1 .btn>a{
	display: block;
	text-align: center;
	background: var(--i_btn_color);
	color: var(--i_btn_txt_color);
	padding: 7px 15px 6px;
	transition: 0.4s ease-in-out;
	letter-spacing: 0.1rem;
	border-radius: 100px;
}
header .header_contents .header_col1 .btn>a:hover{
	opacity: 0.7;
}

header .header_contents .header_col1 .btn .translate a svg{
	max-width: 74%;
	max-height: 74%;
	margin: 13% auto 0;
}
header .header_contents .header_col1 .btn .translate a:hover{
	opacity: 0.8;
}
header#pattern1 nav,
header#pattern3 nav{
	position: relative;
}
header nav *{
	color: var(--i_txt_color);
}
header nav ul.nav_1st{
	width: 100%;
	max-width: 1300px !important;/*任意*/
}
header#pattern2 nav ul.nav_1st{
	width: 77%;
}
header nav ul.nav_1st>li{
	box-sizing: border-box;
	position: relative;
}
header nav ul.nav_1st>li:after{/*罫線*/
	content: "";
	width: 1px;
	height: 50%;
	position: absolute;
	top: 25%;
	left: 0;
	/*border-left: 1px solid rgba(0, 0, 0, 0.12);*/
}
header nav ul.nav_1st>li:last-child:before{/*罫線*/
	content: "";
	width: 1px;
	height: 50%;
	position: absolute;
	top: 25%;
	right: 0;
	/*border-left: 1px solid rgba(0, 0, 0, 0.12);*/
}
header nav ul.nav_1st>li>a{
	font-size: 1.5rem;
	font-weight: 500;
	padding-left: 1vw;
	padding-right: 1vw;
}
header nav ul.nav_1st>li>a:hover:before{
	bottom: 0px;
  	opacity: 0.7;
  	visibility: visible;
}
header nav ul.nav_1st>li>a span{
	/*ナビの高さはline-heightで調整*/
	line-height: 3;/* マージン普通選択時 */
	letter-spacing: 0.2rem;
	transition: 0.4s ease-in-out;
	font-size: 1.45rem;
}
header nav ul.nav_1st>li>a:hover span{
	opacity: 0.8;
}
header nav ul.nav_1st>li>a:hover{
	opacity:0.7;
}
header#pattern2 nav ul.nav_1st>li>a span{
	line-height: 3.5;
}
body.margin header nav ul.nav_1st>li>a span{
	line-height: 4;/* マージン広い選択時 */
}

header nav ul.nav_2nd{
	padding-top: 20px;
}
header nav ul.nav_1st>li:hover ul.nav_2nd{
	padding-top: 15px;
	box-shadow: 2px 2px 5px var(--i_shadow_color);
}
header nav ul.nav_2nd>li{
	background: rgba(251, 246, 242, 0.9);
	border-bottom: 1px solid var(--i_border_color);
}
header nav ul.nav_2nd>li:nth-last-of-type(1){
	border-bottom: none;
}
header nav ul.nav_2nd li a{
	padding: 10px 20px;
	font-weight:  bolid;
	font-size: 1.3rem;
}
header nav ul.nav_2nd>li>a{
	padding-right: 30px;
}
header nav ul.nav_2nd>li>a:after{
	height: 5px;
	width: 5px;
	transform: rotate(-45deg);
	border-right: 1px solid var(--i_sub_color);
	border-bottom: 1px solid var(--i_sub_color);
	top: calc(50% - 2.5px);
	right: 20px;
}

header nav ul.nav_3rd{
	padding-left: 20px;
}
header nav ul.nav_3nd li a{
	padding: 5px 20px;
}
header nav ul.nav_3rd>li>a:after{
	height: 1px;
	width: 4px;
	background: var(--i_sub_color);
	top: calc(50% - 0.5px);
	left: 5px;
}

@media screen and (max-width: 900px){
	header nav ul.nav_1st>li:hover ul.nav_2nd{
		box-shadow: none;
	}
	header,
	header *,
	header nav ul.nav_2nd li a{
	}
	body.scrolled header .logo{
		padding: 10px 0 !important;
	}
	header.open:after,
	header .header_contents{
		background: rgba(255,255,255, 0.95);
	}
	header .burger li.sp_translate a svg{
		height: 28px;
		width: 28px;
		margin: 10% auto;
	}
	header .header_sns,
	header .header_contents .header_col1,
	header .header_contents .header_col2{
		border-top: 1px solid rgba(255,255,255,0.2);
		border-bottom: 1px solid var(--i_border_color);
	}
	header .header_sns{
		border-bottom: none;
	}
	header .header_sns:empty,
	header .header_contents .header_col1:empty,
	header .header_contents .header_col2:empty{
		border: none;
	}
	header .header_contents .header_col1 .tel,
	header .header_contents .header_col1 .btn{
		float: none;
	}
	header .header_contents .header_col2{
		display: block !important;
	}
	header nav{
		border-bottom: 1px solid var(--i_border_color);
	}
	header#pattern2 nav{
		width: 100%;
		margin-left: 0;
	}
	header nav ul.nav_1st{
		border-bottom: 1px solid rgba(255,255,255,0.2);
		border-top: 1px solid var(--i_border_color);
	}
	header nav ul.nav_1st li{
		border-bottom: 1px solid var(--i_border_color);
		border-top: 1px solid rgba(255,255,255,0.2);
	}
	header nav ul.nav_1st>li:before,
	header nav ul.nav_1st>li:after{
		display: none !important;
	}
	header nav ul.nav_1st>li i:before,
	header nav ul.nav_1st>li i:after{
		background: var(--i_sub_color);
	}
	header nav ul.nav_2nd{
		border-top: 1px solid var(--i_border_color);
	}
	header nav ul.nav_2nd>li{
		box-shadow: none;
	}
	header nav ul.nav_2nd>li *{
		/*color: #4a392e;*/
	}
	header nav ul.nav_3rd{
		border-top: 1px solid var(--i_border_color);
	}
	header nav ul.nav_3rd>li:nth-last-of-type(1){
		border-bottom: none;
	}
	header nav ul.nav_1st>li>a:hover:before{
		transform: scale(0, 0);
	}
	header#pattern1 nav, 
	header#pattern3 nav{
		border-bottom: 0;
		border-top: 0;
	}
	header .header_contents .header_col1 .btn > a{
		line-height: 2.2;
		padding: 3px 15px 4px;
	}
	header nav ul.nav_1st>li>a:hover{
		background: none;
	}
	header nav ul.nav_1st>li>a span{
		color: var(--i_txt_color);
	}
	header nav ul.nav_1st>li>a:hover span{
		color: var(--i_main_color);
	}
	header .wraper > .inner{
		min-height: 45px !important;
	}
	header .logo,
	header .logo a,
	header .logo a img{
		max-width: 90px;
	}
	header .logo a img {
    	max-height: 70px !important;
	}
	body.scrolled header .logo a img{
		max-height: 55px !important;
	}
	header .logo{
		position: inherit!important;
		top: 0px!important;
		left: auto!important;
		padding: 0px;
	}
	.index header .logo{
		top: 50px !important;
    	position: relative !important;
    	padding: 0 !important;
        transition: .3s ease-in-out;
	}
	.index header.open .logo{
		top: 0px!important;
		left: auto!important;
		padding: 10px 0 !important;
	}
}

▼MV

#mv_outer{
	/*mvに背景とかはここを利用する*/
	position: relative;
}
#mv .mv_img li img{
	border-radius: 0;
}
#mv{
	width: 90%;
	height: 80vh;
	min-height: 480px;
	margin-left: 10%;
	position: relative;
}
#mv::before{
	content: "";
	position: absolute;
 	z-index: 10;
	top: -1px;
 	left: -1px;
 	width: 140px;
 	height: 140px;
 	background: url("/common/upload_data/hoge/image/mv_top.png") no-repeat;
 	background-position: left top;
 	background-size: contain;
}
#mv:after{
	/*スライドに重ねる色*/
	pointer-events: none;
	background: rgba(46,34,26,0.3);
}

#mv .mv_text{
	height: 100%;
	align-items: center;/*垂直方向中央*/
	width: 100% !important;
	left: 0 !important;
	bottom: 0% !important;
	padding-top: 20px;
}
#mv .mv_text>div{
	max-width: none !important;
	box-sizing: border-box;
	width: 94%;
	color: #fff;
	position: relative;
	display: block;
	right: 8%;
}

#mv .mv_text h2{
	font-size: 60px;/* ←max-font-size的意味合いで使用する。動作はjs。*/
	line-height: 1.1;
	letter-spacing: 0.15rem;
	font-weight: 500;
	font-size: 2.9rem !important;
	position: relative;
}
#mv .mv_text p{
	padding-top: 10px;
	font-size: 1.85rem;	
	font-weight:500;
	letter-spacing: 0.3rem;
}

#mv .mv_scroll {
	width: 3px;
	height: auto;
	position: absolute;
	left: -6%;
	bottom:0;
}
#mv .mv_scroll a{
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: vertical-lr;
	font-weight: bold;
	font-size: 10px;
	position: relative;
	padding-bottom: 100px;
	height: auto;
	width: auto;
	text-indent: 0;
	potision: relative;
	transition: all .3s ease-in-out;
	text-align: right;
	color: var(--i_main_color)!important;
	letter-spacing:0.5rem;
}
#mv .mv_scroll a::before {
    width: 1px;
    height: 70px;
    transform: none;
    position: absolute;
    bottom: 0;
    left: 1px;
	top: auto;
	background:var(--i_main_color);
	transition: all .3s ease-in-out;
}
#mv .mv_scroll a:hover{
	padding-bottom: 80px;
}
#mv .mv_scroll a:hover::before{
    height: 50px;
}
#mv .mv_scroll a:hover::after{
    height: 25px;
}

#mv .mv_arrow {
	display: none;
}
#mv .mv_pointer{
	width: 6px;
	height:100%;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	left: -6% !important;
	right: auto;
	bottom:50px;
}
#mv .mv_pointer li{
	width: 10px !important;
	height: 30px;
	margin: 0;
}
#mv .mv_pointer li::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
	margin-top: 10px;
	border-radius: 100px;
	background:var(--i_txt_color);
    transition: 0s;
}
#mv .mv_pointer li.current:before{
	background:none;
    /*background: var(--i_btn_color);curretに画像を使用しない場合*/
}
#mv .mv_pointer li.current:after{/*curretに画像を使用しない場合は削除*/
	content: "";
    display: block;
	background: url(/common/upload_data/hoge/image/icon.png) no-repeat;
	width: 17px;
    height: 17px;
	background-position: center;
	background-size: contain;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	z-index: 10;
}

@media screen and (max-width: 100vh){
	#mv{
		height: 70vh;
	}
}
@media screen and (min-width: 900px){
	#mv::before{
 		width: 250px;
 		height: 250px;
	}
}
@media screen and (max-width: 800px){
	#mv .mv_text p{
		font-size: 1.7rem!important;
		padding-right: 20px!important;
	}
	#mv .mv_text h2{
		font-size: 2.6rem !important;
	}
}