@charset "UTF-8";

/*
Theme Name: タイトル
Author: タイトル
Description: タイトル's Theme
Version: 1.0
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, a,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: normal;
  line-height: 1.5;
  vertical-align: baseline; }

*{
	box-sizing: border-box;
}

nav ul, ul li {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  text-decoration: none;
}
  
  a:hover {
      opacity: 0.8;
  }

img{
	vertical-align:top;
}

html {
    font-size: 62.5%;
}

body{
	font-family: 'Kosugi Maru', sans-serif,'Varela Round', sans-serif;
}

/* 共通 */

.back_img_flower_1,.back_img_flower_2,.back_img_flower_3,.back_img_flower_4 {
	background-image: url("images/log_back.svg");
	background-size: 100% auto;
	background-repeat: no-repeat;
	animation:30s linear infinite rotation1;
}

@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

.back_img_flower_1{
		width: 320px;
	height: 320px;
		position: absolute;
	bottom:-30px;
	left:-30px;
	z-index: -100;
}


.back_img_flower_2 {
	width: 430px;
	height: 430px;
	position: absolute;
	top:2%;
	right:-5%;
	z-index: -100;
}

.back_img_flower_3{
		width: 400px;
	height: 400px;
		position: absolute;
	bottom:0;
	left:-30px;
	z-index: -100;
}


.back_img_flower_4{
	width: 330px;
	height: 320px;
	position: absolute;
	top:0;
	right:-5%;
	z-index: -100;
}

h2{
	font-size:3em;
}

.flower_log_m img{
	width: 50px;
	margin-right: 15px;
}

.title_contents span,.company_title span,.contact_title span{
	display: table-cell;
}

/* header */

h1 img,footer img{
	width: 100%;
}

h1 img,footer img{
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	width: 114px;
	height: 150px;
	top:40px;
}

.mv_img{
		position: absolute;
    background-image: url("images/mv.jpeg");
	width: 90%;
	height:700px;
    background-size: cover;
    background-position: center center;
	background-repeat: no-repeat;
	margin: 0 auto;
	top:0;
	left:0;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
	margin-top: 100px;

}

.mv_img_thanks{
	position: absolute;
    background-image: url("images/mv.jpeg");
	width: 90%;
	height:700px;

}
.mv_block{
	position: relative;
	width: 100%;
	height:800px;
}

.mv_log{
	position: absolute;
	width:230px;
	height: 230px;
	background-color: #FFF;
	border-radius: 100%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	z-index: 10;
}

.cachcopy{
	position: absolute;
	-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  right: 13%;
  top: 18%;
}

.cachcopy .cach_copy_nai{
    background-color: #fff;
    padding: 20px 5px;
    margin-left: 5px;
    font-size: 2.5em;
    letter-spacing: .4em;
}

.cach_copy_nai img{
	width: 24px;
	height: 100%;
}

	.cach_sp_1,.cach_sp_2{
		display: none;
	}
	

.fadeUpTrigger,.fadeUpTrigger2{
    opacity: 0;
}

/*　トップ画像　*/

.back_lock{
	position: relative;

	overflow: hidden;
	z-index: 100;
}



.top_block{
	width: 1200px;
	display: flex;
	margin: 100px auto;
	justify-content: space-between;
}

.top_img_area{
	width: 50%;
	height: 100%;
}

.top_text_area{
	position: relative;
	width: 43%;
}

.top_text_area2{
	position: absolute;
	top:50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.top_text_area h3{
	color: #FF82C8;
	font-size:3em;
	margin-bottom: 50px;
}

.top_text_area p{
	font-size:1.4em;
		line-height:2.3em;
}

.top_name_area{
	-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	width: 2%;
	font-size:1.2em;
}

.top_name_area ul{
		display: flex;
	justify-content: space-between;
	height: 300px;
	margin: auto;
	z-index: 100;
}

.top_name_area ul li:nth-of-type(2){
	height: 45%;
}

	.line1_top{
		fill:none;
		stroke:#B4B4B4;
		stroke-width:0.5;
		stroke-miterlimit:10;
}

.line_tate_2{
	border-left: 1px solid #000;
	height: 100%;
	border-top:0;
	border-right:0;
	border-bottom:0;
	padding-left:3px;
}

.title_contents ul li:nth-of-type(1){
	width: 200px;
}

.title_contents ul li:nth-of-type(2){
	width: 45%;
	padding-top:25px;
}
.title_contents ul li:nth-of-type(3){
	width: 30%;
	font-size:1.4em;
		padding-top:20px;
}

.line_tate{
	border-bottom: 1px solid #000;
	width: 100%;
	border-top:0;
	border-right:0;
	border-left:0;
}

/*　contents_block　*/

.contents_block{
	position: relative;
	background-color: #FFFAFF;
	z-index: 140;
	
}

.contents_over{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.title_contents{
	padding: 100px 0 50px 0;
	width: 1200px;
	margin: 0 auto;
	z-index: 9998;
}

.title_contents ul{
		display: flex;
		justify-content: space-between;
}

.contents_list{
	width: 1200px;
	margin: 0 auto;
}

.contents_list ul{
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
}

.contents_list li{
	width: 48%;
	margin-bottom: 200px;
}

.contents_list li:nth-child(2),.contents_list li:nth-child(4){
	margin-top: 50px;
}

.contents_img img{
	width: 100%;
		border-radius: 50px;
	height: 377px;
	object-fit: cover;
}

.contents_nai{
	position: relative;
	
}

.contents_text{
	position: absolute;
	top:354px;
	
}

.contents_img{
	position: relative;
	width: 100%;
	height: 100%;
}

.iryo,.enkaku,.konsaru,.roudo{
		padding: 10px;
	display: inline-block;
	color:#fff;
	margin-bottom: 30px;
	font-size:2em;
}

.iryo{
	background-color: #FF82C8;
}

.enkaku{
	background-color: #96E600;
}

.konsaru{
	background-color: #BE46BE;
}

.roudo{
	background-color: #3C6EF0;
}

.contents_text p{
	font-size:1.4em;
	line-height:2.3em;
}


.contents_img::before{
	position: absolute;
	content: '';
	border: 0.5px solid #969696;
	width: 100%;
	height: 100%;
	border-radius: 50px;
	top:5px;
	left:5px;
	z-index: 10;
}

@keyframes line_move {
0% {
stroke-dashoffset:1830px;
}
100% {
stroke-dashoffset:0px;
}
	
}

/*　svg背景　*/


.svg_nami,
.svg_nami:after,
.svg_nami:before,
.svg_nami2,
.svg_nami2:after,
.svg_nami2:before{
	-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
			box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-overflow-scrolling: touch;
	-webkit-font-smoothing: antialiased;
}

.svg_nami{
	position: absolute;
	bottom: -49px;
	height: 50px;
	left: 0;
	width: 100%;
}

.svg_nami2{
	position: absolute;
	top: -49px;
	height: 50px;
	left: 0;
	width: 100%;
	transform: scale(-1, -1);
}

.svg_1,.svg_2,.svg_3,.svg_4{
width: 40%;
position: absolute;
}

.svg_1{
	bottom:0;
	left:-10%;
}

.svg_2{
	top:0;
	right:-10%;
	z-index:-10;
}

.svg_3{
	bottom:10%;
	right:-10%;
}

.svg_4{
	top:10%;
	left:-10%;
}


.svg_3,.svg_2{
	transform: scale(-1, 1);
}

.svg_4{
	transform: rotate(170deg);
}

.st0{
	fill:#ffe6f5;
}


/*　company_block　*/

.back_lock2{
	position: relative;
	width: 100%;
	overflow: hidden;
}

.company_block{
	width: 800px;
	margin-top: 150px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 100px;
}

.company_block table{
	width: 100%;
	font-size:1.4em;
	border-spacing: 10px 0;
	padding-top:50px;
}

.company_block table td{
	padding: 30px 0;
}

.company_block table td:nth-of-type(1){
	border-bottom: 1px solid #ff82c8;
}
.company_block table td:nth-of-type(2){
	border-bottom: 1px solid #323232;
}

.top_line{
	border-top: 1px solid #ff82c8;
}

.top_line_2{
	border-top: 1px solid #323232;
}



/*　contact_block　*/


.contact_block{
	width: 800px;
	margin: 0 auto;
	background-color: #fffaff;
	border: 1px solid #ff82c8;
	border-radius: 50px;
	padding: 100px;
}

.contact_block table{
	font-size:1.4em;
	width: 100%;
	padding: 50px 0;
}

.contact_block table td{
	padding: 15px 0;
}

.contact_block table input,.contact_block table textarea{
	width: 100%;
	border: 1px solid #ff82c8;
	padding: 5px;
}

.contact_block table textarea{
	height: 140px;
	vertical-align:top;
	resize: vertical;
}

.point{
	display: inline-block;
	padding: 1px 5px;
	background-color: #FF82C8;
	color:#fff;
	font-size:0.7em;
	margin-left: 10px;
}

.contact_block p{
	text-align: center;
}

.contact_block table tr td:nth-of-type(1){
  width: 30%;
}

/*footer*/

footer{
	width: 100%;
	position: relative;
	height: 360px;
}


.copyrights{
	text-align: center;
	width: 100%;
	position: absolute;
	bottom:50px;
}

/* ボタン類 */


.submit_1{
    /*矢印の基点とするためrelativeを指定*/
  position: relative;
    /*ボタンの形状*/
  border: 1px solid #ff82c8;
    padding: 20px 80px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    outline: none;
    /*アニメーションの指定*/
    transition: all .2s linear;
	border-radius: 25px;
	background-color: #ff82c8;
	font-size:1.4em;
}

.submit_1:hover{
  background:#DE6DB8;
  color:#fff;
}

/*矢印と下線の形状*/
.submit_1::before{
  content:"";
    /*絶対配置で下線の位置を決める*/
  position: absolute;
  top:50%;
  right:10px;
    /*下線の形状*/
  width:30px;
  height:1px;
  background:#fff;
    /*アニメーションの指定*/
    transition: all .2s linear;
}

.submit_1::after{
  content:"";
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    top: 38%;
    right: 14px;
    /*矢印の形状*/
  width:1px;
  height:8px;
  background:#fff;
    transform:skewX(45deg);
    /*アニメーションの指定*/
    transition: all .2s linear;
}

/*hoverした際の移動*/
.submit_1:hover::before{
  right:5px;
}

.submit_1:hover::after{
  right:9px;
}

.thanks_text{
	position: absolute;
	text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	width: 100%;
}

.thanks_text h2,.thanks_text a{
	color: #FF82C8;
}
.thanks_text p{
	font-size: 1.8em;
	margin-top: 30px;
}

.mv_block_2{
	position: relative;
	height: 100vh;
}


.thanks_footer{
	position: absolute;
	bottom: 0;
	right: 0;
}



input.myError {
background-color:#fffff0;
}

label.myError {
color:#FF0000;
}

textarea.myError {
background-color:#fffff0;
}
/*==================================================
ふわっ
===================================*/

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02{
animation-delay: 0.2s;
}

.delay-time04{
animation-delay: 0.4s;
}


.delay-time06{
animation-delay: 0.6s;
}

.delay-time10{
animation-delay: 1s;
}

.delay-time20{
animation-delay: 2s;
}



/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
  overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

/* 上下のアニメーション*/
.upAnime{
    opacity: 0;/* 事前に透過0 にして消しておく*/
}

.slideAnimeDownUp {
    animation-name:slideTextY100;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity: 0;
	animation-delay: 0.6s;
}

@keyframes slideTextY100 {
    from {
        transform: translateY(100%);/* 要素を上の枠外に移動*/
        opacity: 0;
    }
    to {
        transform: translateY(0);/* 要素を元の位置に移動*/
        opacity: 1;
    }
}
.slideAnimeUpDown {
    animation-name:slideTextY-100;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity: 0;
	animation-delay: 0.6s;
}

@keyframes slideTextY-100 {
    from {
    transform: translateY(-100%);/* 要素を下の枠外に移動*/
    opacity: 0;
    }
    to {
    transform: translateY(0);/* 要素を元の位置に移動*/
    opacity: 1;
    }
}



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


/* 共通 */



/* header */


/*　トップ画像　*/


.top_block{
	width: 90%;
	margin-top: 100px;
	transition-duration : 1s;
}

.top_img_area{
	width: 50%;
	height: 100%;
}

.top_text_area{
	position: relative;
	width: 43%;
}
/*　contents_block　*/
.title_contents{
	width: 100%;
	padding-right: 5%;
	padding-left: 5%;
}
.contents_list{
	width: 90%;
	margin: 0 auto;
}

}



@media screen and (min-width: 1036px) {
	.wrapper {
		display: none;
	}

}


@media screen and (max-width: 1035px) {
	.pc_menu {
		display: none;
	}
	
	
.mv_img{
	width: 100%;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	transition-duration : 1s;
}
	
		.top_block{
	margin-bottom: 0;
}
	

	.cachcopy{
	top:30%;
		transition-duration : 1s;
}

	
	/*　company_block　*/
	
	.back_lock{
		height: 70vh;
	}

.back_lock2{
	position: relative;
	width: 100%;
	overflow: hidden;
}

.company_block{
	width: 80%;
}

.contents_img img{
	width: 100%;
		border-radius: 50px;
	height: 302px;
	object-fit: cover;
}

	
.contents_text{
	position: absolute;
	top:284px;
	
}
	.contents_list li {
    margin-bottom: 30vh;
			transition-duration : 1s;
}
	/*　contact_block　*/


.contact_block{
	width: 90%;
} 

}


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


.cachcopy{
  writing-mode: horizontal-tb;
	  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
	left: 10%;
	top:45%;
	transition-duration : 1s;
}

.cachcopy .cach_copy_nai{
	padding:15px;
	margin-left: 0;
	margin-bottom:15px;
	transition-duration : 1s;
	font-size: 1.6em;
	letter-spacing: .3em;
}

.cach_copy_nai img{
	width: 100%;
	height: 24px;
}

	
	.cach_pc_1,.cach_pc_2{
		display: none;
	}
		.cach_sp_1,.cach_sp_2{
		display: block;
	}
	
	
	.top_text_area h3{
		margin-bottom: 20px;
		font-size:2em;
		transition-duration : 1s;
	}
	
	.back_lock{
		height: 65vh;
	}

.contents_list li{
	width: 100%;
}
	
	.contact_block table tr td:nth-of-type(1){
  width: 100%;
}

.contents_list li:nth-child(2),.contents_list li:nth-child(4){
	margin-top: 0;
}
	
table td{
	display: block;
transition-duration : 1s;
}

.contact_block{
	padding: 50px 5%;
}
	
	.title_contents ul{
			flex-direction: column;
		transition-duration : 1s;
	}
	
	.title_contents ul li:nth-of-type(1),.title_contents ul li:nth-of-type(3){
	width: 100%;
	transition-duration : 1s;
}

.title_contents ul li:nth-of-type(2){
	display: none;
	transition-duration : 1s;
}
.title_contents ul li:nth-of-type(3){
	font-size:1.4em;
		padding-top:10px;
	transition-duration : 1s;
}

	.top_line_2{
		border: none;
		transition-duration : 1s;
	}

	
	.company_block table td:nth-of-type(1){
				border-bottom: none;
		padding-bottom: 10px;
		transition-duration : 1s;
	}
	
		.company_block table td:nth-of-type(2){
		border-bottom:none;
			padding-top:10px;
		transition-duration : 1s;
	}
	
			.company_block table td:last-child{
		border-bottom:1px solid #ff82c8;
		transition-duration : 1s;
	}
	
	.contact_block table td:nth-child(1){
		padding-bottom: 0;
		transition-duration : 1s;
		
	}
	

	
}
@media screen and (max-width: 600px) {
		
	.back_lock{
		height: 100vh;
	}
	
	.top_name_area{
			 -ms-writing-mode: horizontal-tb;
  writing-mode: horizontal-tb;
	transition-duration : 1s;
		margin-bottom: 20px;
	}
	
	.top_name_area ul{
		height: 1%;
	}
	
	.top_name_area ul li:nth-of-type(2){
	height:1%;
		width: 45%;
		transition-duration : 1s;
}

.line_tate_2{
	border-left: 0;
	border-bottom:1px solid #000;;
	padding-left:0;
	padding-top:3px;;
	transition-duration : 1s;

}
	
	.top_text_area,.top_name_area{
		width: 100%;
		padding: 0 5%;
	}
	
	.top_img_area{
		width: 100%;
		padding: 5% 15% 0 15%;
		height: 30vh;
	}
	
	.top_text_area h3{
		font-size:3em;
	}
	
	.top_text_area2{
	position: relative;
		top:0;
		 transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
}
	
	.top_block{
	flex-direction: column-reverse;
		width: 100%;

	}
	

		.contents_text p{
	font-size:1.2em;
}
	


}

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

	
	.top_img_area{
		padding: 5% 5% 0 5%;
	}
	
		.top_text_area h3{
		font-size:2em;
	}
	
			.contents_list li {
    margin-bottom:35vh;
		transition-duration : 1s;
}
	h2{
		font-size: 2.5em;
	}
}



@media screen and (min-width: 769px) {
	.sp {
		display: none;
	}
	
	
	
}