@charset "EUC-JP";
/* CSS Document */
a:hover{ text-decoration: none;}
.bg-img{
	background-position :center;
	background-repeat: no-repeat;
	background-size: contain;
}
.visible-xs{display: none;}
.hidden-xs{display: block;} 
@media (max-width: 767px){
	.visible-xs{ display: block;}
	.hidden-xs{display: none;}
	/*p{ font-size: 12px;}*/
 }
.wrapper-relative{ position: relative;}
.poh-font,
.title-ef,
.lead{ font-family: 'Oswald', sans-serif;font-weight: 700;}
.lead{font-size:1.4em;}
.white{ color: white;}
.purple{ color: #872b8b;}
.blue{ color:#00a1af;}

.logo{ background-image: url(../img/poh_logo.png);}
.logo_white{ background-image: url(../img/poh_logo_w.png);}
.ig{ background-image: url(../img/ig-icon_purple.png);}

.white-back{
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	background-color: #fff;
	z-index: 99999;
	display: none;
}
/*textillate br*/
.br:before {
    content: "\A" ;
    white-space: pre ;
}
.ig{
	margin-top: .3em;
	width: 30px;
	height:30px;
}
@media (max-width: 767px){
	.ig{ width: 1.5em; height: 1.5em;}
}

/*====WIPE==================*/
.wipe-wrapper{
    position:relative;
    margin:38px;
    width:100%;height:33vw;
	overflow: hidden;
}
.wipe-wrapper_full{height:50vw;width:90vw;margin-left:-15px}
.wipe-wrapper_full .bg-img{background-position:left;}
.wipe-wrapper div{position:absolute;}
.wipe-wrapper .bg-img{
    left:0;
    margin-top:0;
    z-index:10;
    width:100%;height:100%;
}
.wipe-wrapper .wipe-cover{
    background: #fff;
    z-index:11;
	left:0;
    bottom:0;
    width:inherit; height: inherit;
	transition: 1.5s ease ;
}
@media (max-width: 991px){
    .wipe-wrapper{
        margin:0 auto;
        height:67vw;
    }
    .wipe-wrapper_full{
        margin-left:-15px;
        width:100vw;height:67vw;
    }
	.wipe-wrapper .wipe-cover{transition: 1.5s ease;}
}
/*====HEADER==================*/
header{
	position: fixed;
	top: 30px;
	left: 30px;
	z-index: 100;
}
header .logo{
    margin-top:10px;
	width: 200px;
	height: 30px;
	background-position: 0 50%;
}
.header-menus{
	position: fixed;
	right: 30px;
	top: 20px;
}
.left-link{ display: inline-block; margin-top: 10px;}
.counseling-left-link{margin-top:0px;}
.header-menus a{
	display: inline-block;
	padding: 0 10px;
	margin: 0;
	color: #872b8b;
	font-size: 23px;
	font-family: 'Oswald', sans-serif;
    font-weight: 500;
}
.header-menus a:hover{color: #00a1af;}
.left-link :last-child{ border-left: 2px solid  #872b8b;}
.header-menus{ margin:0;}
.header-menus .ig{
	position: relative;
	top: 5px;
	padding-top: 10px;
	background-position: bottom;
}
 @media (max-width: 767px){
	 header{top: 15px; left: 0;}
	 header .logo{ width: 45vw; height: 1.5em;margin-top:initial;}
	 .header-menus{ top:5px; right: 5px;}
	 .header-menus a{ font-size: 1em; padding: 0 5px;}
	 .header-menus a:hover{ color: #872b8b;}
	 .header-menus .ig{ margin-top: 0; }
 }


/*====FOOTER==================*/
.footer{
	position: relative;
	padding: 20px 30px;
	margin-top: 10em;
	height: 10em;
	background:#00a1af;
	background:-webkit-linear-gradient(right, #00a1af 70%, #872b8b);
	background:-moz-linear-gradient(right, #00a1af 70%, #872b8b);
	background:linear-gradient(right, #00a1af 70%, #872b8b);
}
.footer_left{ width: calc(100vw - 30px -20em);}
.footer .logo_w{
	position: absolute;
	top: calc(50% - 15px);
	width: 200px;
	height: 30px;
	background-image:url(../img/poh_logo_w.png);
}
.footer .copy{
	position: absolute;
	bottom: 10px;
	color: #fff;
	font-size: .7em;	
}
.footer_right{position: absolute; right:30px;}
.footer a{
	color: #fff;
	display: block;
}
.footer a:hover{ color: #872b8b;}
.footer .menu-left,
.footer .menu-right{float: left; padding: 0 2em;}
.footer .menu-left{
	border-right: 1px solid #fff;
}
.footer .ig{
	margin-top: 1em;
	background-image: url(../img/ig-icon_white.png);
}
@media (max-width: 767px){
	.footer{
        font-size: .8em;
		margin-top: 100px;
    }
	.footer .logo_w{
		width: 30vw; height: 1.5em;
		top: calc(50% - .75em);
	}
	.footer a:hover{ color: #fff;}
	.footer .menu-left,
	.footer .menu-right{padding: 0 1em;}
	.footer_right{ right:10px;}
 }
/*====TOP==================*/
.top-header{
   top:initial; right:-3em; bottom:6em;
   transform:rotate(90deg);
}
@media (max-width: 991px){
    .top-header{bottom:8em;right:-2em;}
	.top-logo{position:fixed;bottom:20px;left:calc(50% - 5em);}
}
@media (max-width: 767px){
	.top-logo{left:calc(50% - 22.5vw);}
}
/*====CONCEPT==================*/
.text-anime{
	opacity:0;
	filter:blur(10px);
	transition:filter 3s ease;
}
.text-anime_on{filter:blur(0)}
.top-wrap{width:100vw;height:calc(100vh - 25px);}
.top-wrap .concept-words,
.top-wrap .concept-r{position:fixed;}
.concept-r{
    width:100px;height:200px;
    border-radius:0 100px 100px 0;background:#00a1af;
}
.top-wrap .concept-words{
    width:30vw;min-width:300px;
    top:5vh;right:20px;
}
.top-wrap h1{font-size:100px; line-height:100px;color: #00a1af;text-align:right;opacity:0;}
/*.top-wrap h1 span{color: #872b8b;}*/
.top-wrap .lead{
    color:#00a1af; font-size:1.5em;
    margin:30px 0 10px;
}
.top-wrap .comment{color: #872b8b;width:80%;}
.top-wrap .top-image{
    width:calc(70vw - 50px);height:100vh;
    position:absolute;top:0;left:-10px;
    background-image: url("../img/presc.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}
.image-line{
    position:absolute;top:0;right:calc(30vw + 50px);
    width:250px;height:100vh;
    background-image: url("../img/top-wave.png");
    background-repeat:no-repeat;
    background-size:contain;
    background-position:right;
}
.top-start_wrap{
    width:180px;height:180px;
    position:relative;top:55vh;left:calc(70vw - 35px);
}
@media (max-width: 1000px){
	.top-wrap .comment{width:100%;}
    .top-wrap .top-image{width:calc(100vw - 350px)}
    .image-line{right:350px;}
    .top-start_wrap{left:calc(100vw - 350px + 15px)}
}
.motion{position:absolute;}
.motion_1{
    width:150px;height:150px;border-radius:75px;
    background:#872b8b;
    top:15px;left:15px;
}
.motion_2{
	border-radius:100px;
    border: 2px #872b8b solid;
	width:150px;height:150px;top:15px;left:15px;opacity:1;
    /*border: 2px blue solid;*/
	/*animation: button-wave ease-out 1s infinite;*/
}
.motion_3{
	width:150px;height:150px;border-radius:75px;
    background:#00a1af;
    top:15px;left:15px;
}
.center-button{
	background-image: url("../img/start-button.png");
    position:absolute;top:10px;left:10px;
	width:160px;height:160px;border-radius:80px;
}
	
#motion-area{
    content:"";
    width:400px;height:400px;border-radius:200px;
    display:block;
    position:absolute;
    top:-105px;left:-105px;
}
@media screen and (max-width: 991px){
    .concept-r{width:15vw;height:30vw;border-radius:0 16vw 16vw 0;}
    .top-wrap .concept-words{width:calc(100% - 20px);top:20px;right:10px;}
    .top-wrap h1{font-size:15vw; line-height:15vw;margin-bottom:0;}
    .top-wrap .lead{margin:0px 0 2px; font-size:4.5vw;line-height:15vw;width:100%;text-align: right;}
    .top-wrap .comment{font-size:3.2vw;line-height:1.4;}
    .top-wrap .top-image{position:fixed;width:100vw;height:52.5vh;top:initial;bottom:0;left:0;}
    .image-line{
		position:fixed;
		width:100vw;height:25vw;top:initial;left:0;bottom:calc(50vh - 20vw);
		background-image: url("../img/top-wave_sp.png");
        background-position:top;
        background-size:cover 
	}
    .top-start_wrap{position:fixed;top:calc(55% - 90px);left:calc(50% - 90px);}
}
@media (max-width: 767px){
    .concept-r{width:16vw;height:32vw;}
    .top-wrap h1{font-size:17vw; line-height:17vw;}
    .top-wrap .lead{font-size:5vw;line-height:17vw;}
    .top-wrap .comment{font-size:4.3vw;}
    .top-wrap .top-image{height:50vh;}
    .image-line{bottom:calc(50vh - 25vw);}
    .top-start_wrap{position:fixed;top:calc(55% - 90px);left:calc(50% - 90px);}
}


/*====MAIN-CONTENTS==================*/
.color-button{
	width: 200px;
	height: 30px; line-height:25px;
	color: #fff;
	border-radius: 15px;
	border: 2px solid #fff;
	background:#00a1af;
	background:-webkit-linear-gradient(right, #00a1af 70%, #872b8b);
	background:-moz-linear-gradient(right, #00a1af 70%, #872b8b);
	background:linear-gradient(right, #00a1af 70%, #872b8b);
	font-family: 'Oswald', sans-serif;
    font-weight: 500;
}
.color-button:hover{cursor: pointer;}
.main-contents{
	min-height: calc(100vh - 250px);
	padding: 150px 0 20px;
}
h1{font-family: 'Oswald', sans-serif;font-weight: 500;}
.title{
	font-family: 'Oswald', sans-serif;
    font-weight: 400;
    letter-spacing:-.1em;
	position: relative; /*.title-sq*/
	width: 38vw;
	margin-bottom: 50px;
}
.title-sq{
	position: absolute; /*.title*/
	bottom: .6em;
	width: 0;
	height: 3.1em;
	border-top: solid 3px #00a1af;
	border-right: solid 3px #00a1af;
	border-bottom: solid 3px #00a1af;
	transition: 1s ease;
}
.title h1{opacity: 0;}
.main-contents .title h1{
	font-size: 5em;
	color: #00a1af;
}
.expo-img{
	position: absolute;
	right: 0;
	width: 100%;
	height: 50vh;
	background-position: right;
}
.close-button{
	margin: 50px auto;
	width: 200px;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	color: #fff;
	background-color: #872b8b;
	font-family: 'Oswald', sans-serif;
    font-weight: 500;
}
.close-button:hover{cursor: pointer;}
.para-img{ width: 40vw; height: 30vw;}
@media (max-width: 991px){
	 .title{ width: 60%;}
}
@media (max-width: 767px){
	 .main-contents{
		min-height: calc(100vh - 150px);
		padding: 70px 0 0;
	}
	 .main-contents .title h1{ font-size: 3.5em;}
	 .title{ width: 100%;}
	 .title-sq{
		height: 2.2em;
		bottom: .4em;
		border-top: solid 2px #00a1af;
		border-right: solid 2px #00a1af;
		border-bottom: solid 2px #00a1af;
	}
 }
.wave-wrap,
.loading-wave{
	position:absolute;
	top:0;
	width: 100vw; height:100vh;
	z-index:102;
	background-size: contain;
	background-repeat: repeat-x;
	background-position: center;
}
.wave-wrap{
	z-index:102;
	width: 130vw; height:100vh;
	left: -130vw;
    overflow: hidden;
}
.loading-wave_1 .loading-wave{ background-image: url(../img/poh_wave_1.png);}
.loading-wave_2 .loading-wave{ background-image: url(../img/poh_wave_2.png);}
@keyframes wave-wrap{
	0%{left:-100vw;}
	100%{left:300vw;}
}
@keyframes wave-inner{
	0%{left:100vw;}
	100%{left:-100vw;}	
}
@media (max-width: 767px){
	.loading-wave{background-size: auto 50%;}
	.loading
	
}
/*====CONCEPT==================*/
#concept{
	height: 100vh;
	overflow: hidden;
   	padding-top: 100px;
}
#concept .container-fluid{ padding-left:0;}
.infinite-move{
	width: 60%;
	height: 2em;
    margin-left:50px;
    margin-bottom: 4vw;
	overflow: hidden;
	position: relative; /*span*/
}
.infinite-move span{
	font-size: 1.2em;
	display: inline-block;
	white-space: nowrap;
	text-align: justify;
	position: absolute; /*.infinite-move*/
}
.infinite-move span:first-child{ animation: infinite-move1 linear 10s infinite;}
.infinite-move span:last-child { animation: infinite-move2 linear 10s infinite;}
@keyframes infinite-move1{
	0%{ transform: translateX(60em);}
	to{ transform: translateX(0);} 
}
@keyframes infinite-move2{
	0%{ transform: translateX(0);}
	to{ transform: translateX(-60em);} 
}
#concept h1{
	font-size: 5em;
	line-height: .9em;
}
#concept .slider{padding: 0;}
#concept li img{height: 38vw;}
#concept h2{font-size: 3.4em; margin-top:.5em;}
#concept h3{ border-bottom: 4px solid; width: 13.5em; margin-bottom:30px;}
#concept .concept-comment{font-size: 1em; line-height: 1.3em; margin-right:5vw;}
#concept .concept-comment div{margin-bottom:.5em;}
.next-link{
    margin-top: 50px;
	width: 60%;	
}
#concept .next-link p{margin-right:inherit;}
.counseling-button{margin: 0 auto;}
@media (max-width: 767px){
    .h1wrap{
        margin: 0;
		width: 100vw;
		height: 7em;
	}
    #concept{padding-top:20px; padding-bottom:0;}
    #concept .container-fluid{padding: 15px;}
    #concept .infinite-move{margin-left:0; width:40%;}
    #concept .slider-wrapper{position:relative;/*.concept-word*/}
    #concept .slider-wrapper .concept-word{position:absolute; bottom: -4px;}
    #concept li img{height:66vw;}
    #concept h2{font-size: 10vw;}
    #concept h3{font-size: 5.5vw; margin-bottom: 0;}
    #concept .concept-comment,
    #concept p{font-size: .9em; margin-right:0;}
    #concept .small{font-size: .7em}
    .next-link{ margin:20px auto 0;	}
    .next-link p{ margin-bottom: 5px; font-size: 1em;}
 }
/*====FAQ==================*/
.view-more{ padding: 20px 0;}
.more-button{
	display: block;
	width: 100%;
	position: relative; /*.span*/
	background-color: #00a1af;
	/*margin: 20px 0;*/
	height: 2.4em;
	line-height: 2em;
	border-radius: 1.2em;
	border: 1px solid #fff;
	color: #fff;
}
.more-button:hover{ cursor: pointer;}
.more-line{
	position: absolute;
	right: 1em;
	top: calc(50% - 1px);
	width: calc(2em - 4px);
	height: 2px;
	display: inline-block;
	background-color: #fff;
	transition: .3s ease-in-out;
}
.more-button .more-line_1{ transform: rotate(90deg);}
#faq .more-inner{
	background-color: #fff;
	color: #872b8b;
}
#faq .more-inner p{ padding-top: 30px;}

/*====CONTACT==================*/
#contact .small{margin-top:30px;}
.contact-links{
	margin: 50px 0 80px;
	width: 300px;
	max-width: 60vw;	
}
.contact-links .color-button{ width: 100%; margin:30px 0;}
@media (max-width: 767px){
	.contact-links{ width: 100%; max-width: none;}
}

/*====COMPANY/LAW/POLICY==================*/
.expo{font-size:1.2em;margin-top:10px;}
.expo table{
	margin: 20px;
	width: calc(100% - 40px);
}
.def_lst_dt,
.expo tr{ border-bottom: solid 2px #872b8b;}
.def_lst_dt,
.expo th,
.expo td{ padding: 20px 0 20px;}
.def_lst_dt,
.expo td,
.def_lst_dd{ color: #872b8b;}
.def_lst_dt,
.expo th{
	color: #00a1af;
	width: 15em;
}
.law-title,
.policy-title{
	margin: 50px 20px 0;
	height: 2em;
	line-height: 2em;
	border-radius: 1em;
	color: #fff;
	background-color: #00a1af;
}
.policy_lead{
	margin: 30px 0;
	color: #00a1af;
}
#policy .expo{margin-bottom: 150px;}
.credit-img,
.atobarai-img{
	width: 100%;
	height: 100px;
	background-position: left;	
}
.credit-img{background-image: url(../img/credit-img.png); }
.atobarai-img{background-image: url(../img/atobarai-img.png);}
@media (max-width: 767px){
    .expo{font-size:1em;}
    .expo table{font-size: .8em; margin:0; width: 100%;}
 	.expo th,
 	.expo td{ display: block;}
    .expo th{ padding: 30px 0 10px;}
    .expo td{ padding: 0 0 10px;}
	#policy .expo{margin-bottom: 70px;}
}



/*====PARA==================*/
.para-back{width: 100%; height: 50vw;}
.ele-text,
.price{ background: rgba(255,255,255,.5); padding:0 10px; z-index:10;/*position: relative;*/}
.ele-text{ padding: 0;}
.price{ padding: 0 10px;}
.sales-point,
.price{position:relative;}

/*====TZ==================*/
#tz{ width: 100vw; height:100vh; overflow: hidden;}
#tz video{ width: auto;height: auto; min-width:100%; min-height: 100%;}
.tz-img{ background-image: url(../img/PHOTO_PRESCRIPTION_1_WEB.jpg);}
.tz-ig{width: 50px; height:50px; margin: 50px auto 0; padding:20px;}
.ig-link{ margin:100px auto 0;}
.ig-link p{
	width: 27em;height:2em;
    color: #fff;
	line-height: 1.9em;
	border-radius: 1em;
	background-color: #00a1af;
	margin: 150px auto 50px;
}
/*#tz-concept{ overflow:hidden;}*/
#tz-concept .title{width: 60%;}
#tz .background{ overflow: hidden;}
#tz-concept .expo h2{
	color: #00a1af;
	font-size: 1.6em;
}
#tz-concept .expo div{
	width: 60%; height: 3px;
	background-color: #00a1af;
}
#tz-concept .expo p{margin: 30px 0;}
@media (max-width: 767px){
	#tz video{
        width:100vh; height:200vw;
        transform: rotate(90deg) translateX(38.8vw) translateY(-6.3vh);
        transform-origin: 50vh 50vw;
	}
	/*#tz-concept {margin-top: calc(50vw + 100px);}*/
	#tz-concept .title{width: 100%;}
	#tz-concept h1{font-size: 2.8em;}
    #tz-concept .presc-title{ margin-top:0;}
    #tz-concept .expo p{font-size: .9em;}
    .tz-ig{margin: 10px auto;}
    .expo-img{margin-top: 30vw;}
	.ig-link{ padding-top:45vh;}
	.ig-link,
	.ig-link p{ width:100%; margin:20px auto;}
}
/*====COLOR-LINK==================*/
.color-link{
	position:relative;
	background: #00a1af;
}
.color-link a,
.color-link div{
	position: absolute;
	top:0; left:0;
	background:#00a1af;
	background:-webkit-linear-gradient(right, #00a1af 70%, #872b8b);
	background:-moz-linear-gradient(right, #00a1af 70%, #872b8b);
	background:linear-gradient(right, #00a1af 70%, #872b8b);
	opacity: 1;
	transition: opacity 1s;
}

.color-link,
.color-link a,
.color-link div{
	display: block;
	width: 100%; height:2em;
	text-align: center;
	line-height: 2em;
	border-radius: 1em;
	color: #fff;
}