@charset "utf-8";

html {
	/* font-size:62.5%; */
	font-size:min(0.909090909090909vw,62.5%);
}
/*
10px / innerサイズ
本来は1060pxだが、見た目的にバランスの良い 1100px で設定
*/

body {
	font-size:1.6em;
	font-family: "Zen Old Mincho", serif;
	color:#444;
	font-weight: 400;
}

* {
	box-sizing: border-box;
}

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, 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 {
	font-size:1.6rem;
}

address {
	font-style: normal;
}

 /* --------------------------

基本サイズ10px
3rem = 30px
1.6rem = 16px

--------------------*/

.en,
.link_nav_txt::after,
.h_title::before,
.subfv h1::after,
.footer_no p::before,
.footer_no a::before,
#pager li,
#pager li a,
#pager li span {
	font-family: "Lato", sans-serif;
	font-weight:400;
}

.ser_block h3::before {
	font-family: "Outfit", sans-serif;
	font-weight:300;
}

#wrap,
section,
article,
main {
	width:100%;
	position:relative;
	overflow:hidden;
}

#wrap {
	opacity:0;
}

.display_on {
	opacity:1!important;
}


main {
	padding:0 0 16rem 0;
	display:block;
}


.inner {
	width:100%;
	max-width:128rem;
	margin:0 auto;
	padding:0 8rem;
}


img {
	max-width:100%;
	vertical-align:bottom;
}

.obf_cover,
.obf_contain {
	width:100%;
}

.obf_cover img {
	width:100%;
	height:100%;
	object-fit: cover;
	font-family: 'object-fit: cover;';
}

.obf_contain img {
	width:100%;
	height:100%;
	object-fit: contain;
	font-family: 'object-fit: contain;';
}

a {
	color:#444;
	transition:all .4s;
	cursor: pointer;
}

p {
	font-size:2rem;
	line-height:1.75;
	letter-spacing: 0.04em;
}

h1,h2,h3,h4,h5,h6,dt,dd {
	line-height:1.25;
}

small {
	line-height:1.25;
}

/* --- 複数行対応 3点リーダー css common.js内 --- */

/* --- 2行のときは height: calc(1.63em * 2 ); ---*/
  .js-text-overflow{
	overflow: hidden;
	width: 100%;
	/* white-space: nowrap;
	text-overflow: ellipsis; */
  }

  .height {
	height: calc(1.63em * 2);
}


/*-------------------------------
	flex
-------------------------------*/

.d_flex {
	display:-webkit-box;
  	display:-ms-flexbox;
	display:flex;
}

.fle_wra {
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}

.nowrap {
	-webkit-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
}

.jus_ce {
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
}

.jus_sb {
	-webkit-justify-content:space-between;
	-ms-flex-pack:justify;
	justify-content:space-between;
}
.jus_ar {
	-webkit-justify-content:space-around;
	-ms-flex-pack:distribute;
	justify-content:space-around;
}
.jus_end {
	-webkit-justify-content:flex-end;
	-ms-flex-pack:end;
	justify-content:flex-end;
}

.ali_ce {
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
}
.ali_st {
	-webkit-box-align: start;
	-ms-flex-align:start;
	align-items:flex-start;
}

.ali_end {
	-webkit-align-items:flex-end;
	-ms-flex-align:end;
	align-items: flex-end;
}

/* --- flex space-between対策 3block --- */

.sb_cp {
	position:relative;
}

.sb_cp::after {
	content:"";
	display: block;
	width:30%;
}


.pc_none {
	display:none;
}

.tex_ce {
	text-align:center;
}

.tex_ri {
	text-align:right;
}

.fw_bold {
	font-weight:700;
}
.fw_normal {
	font-weight:400;
}
.fw_medium {
	font-weight:500;
}
.fw_semibold {
	font-weight:600;
}

/*-------------------------------
	color
-------------------------------*/

.white {
	color:#fff;
}

.gray {
	color:#999999;
}

.bg_gray {
	background:#F8F7F6;
}

.bg_white {
	background:#fff;
}

/*-------------------------------
	btn
-------------------------------*/

.btn {
	display: block;
	width:14rem;
	height:4rem;
	line-height:4rem;
	border-radius: 2rem;
	background:#444;
	padding:0 3.5rem 0 2rem;
	overflow:hidden;
	position:relative;
}

.btn_txt {
	position:relative;
	color:#fff;
	font-size:1.6rem;
}

.btn_arrow {
	display: flex;
	justify-content: center;
	align-items: center;
	position:absolute;
	right:1.5rem;
	top:0;
	bottom:0;
	margin:auto 0;
}

.btn_arrow svg {
	width: 1.8rem;
	height:0.8rem;
	fill:#fff;
	transition:transform .4s;
}

.btn::before {
	content:"";
	display: block;
	width:100%;
	height:100%;
	background:#00AFCC;
	transform:scale(0,1);
	transition:transform .4s;
	transform-origin:right;
	position:absolute;
	left:0;
	top:0;
}

.btn:hover::before {
	transform:scale(1,1);
	transform-origin:left;
}

.btn:hover .btn_arrow svg {
	transform:translateX(0.5rem);
}



/*-------------------------------
	link nav
-------------------------------*/

.link_nav li {
	border-top:1px solid #ddd;
}

.link_nav li:last-of-type {
	border-bottom:1px solid #ddd;
}

.link_nav li a {
	display: block;
	padding:1em 4.375em 1em 1em;
	position: relative;
}

.link_nav_txt {
	font-size:2rem;
	letter-spacing: 0.04em;
	position:relative;
}

.link_nav_txt::after {
	content:"/ " attr(data-en);
	display: inline-block;
	font-size:1.4rem;
	padding-left:0.5em;
	position:relative;
	top:-0.15em;
	letter-spacing: 0.02em;
}

.link_nav_btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width:4.8rem;
	height:2.4rem;
	border-radius:1.2rem;
	background:#444;
	border:1px solid #444;
	overflow:hidden;
	position:absolute;
	right:1em;
	top:0;
	bottom:0;
	margin:auto 0;
}

.link_nav_btn::before,
.link_nav_btn::after {
	content:"";
	display: block;
	width:100%;
	height:100%;
	transition:transform .2s;
	transform-origin: right;
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	margin:auto 0;
}

.link_nav_btn::before {
	background:#00AFCC;
	transform:scale(0,1);
}

.link_nav_btn::after {
	background:linear-gradient(90deg, #fff 0%, #fff 50%, #00AFCC 50%, #00AFCC 100%);
	transform:scale(0,1);
	transition-delay:0.2s;
}

.link_nav_btn svg {
	width:1.8rem;
	height:0.8rem;
	fill:#fff;
	transition:transform .3s ,opacity .3s;
	opacity:1;
	transform-origin: right;
}

.link_nav a:hover .link_nav_btn,
.news-content a:hover .link_nav_btn {
	border-color: #00AFCC;
}

.link_nav a:hover .link_nav_btn::before,
.news-content a:hover .link_nav_btn::before {
	transform:scale(1,1);
	transform-origin: left;
}

.link_nav a:hover .link_nav_btn::after,
.news-content a:hover .link_nav_btn::after {
	transform:scale(1,1);
	transform-origin: left;
}

.link_nav a:hover .link_nav_btn svg,
.news-content a:hover .link_nav_btn svg {
	transform:translateX(1rem);
	transform-origin: left;
	opacity:0;
}


/*-------------------------------
	svg holder
-------------------------------*/

.svg_holder {
    position: absolute;
    z-index: -1;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

/*-------------------------------
	h_title
-------------------------------*/

.h_title {
	font-size:4rem;
	margin-bottom:1em;
	line-height:1.25;
	position:relative;
	font-weight:500;
	letter-spacing: 0.04em;
}

.h_title_center {
	text-align: center;
}

.h_title::before {
	content:attr(data-en);
	display: block;
	font-size:2rem;
	display: block;
	color:#999;
	font-weight:400;
	margin-bottom:0.25em;
	line-height:1;
}

/*-------------------------------
	uline_title
-------------------------------*/

.uline_title {
	border-bottom:1px solid #999;
	margin-bottom:0.75em;
	font-size:2.4rem;
	letter-spacing: 0.04em;
	line-height:1.75;
	font-weight:500;
}

/*-------------------------------
	filter
-------------------------------*/

.filter_white {
	position:relative;
}

.filter_white::before {
	content:"";
	display: block;
	width:100%;
	height:100%;
	background:rgba(255,255,255,0.25);
	position:absolute;
	left:0;
	top:0;
}

/*-------------------------------
	kome
-------------------------------*/

.kome {
	position:relative;
	padding-left:1.1em;
}

.kome::before {
	content:"＊";
	display: block;
	width:1em;
	height:1em;
	font-size:1em;
	position:absolute;
	left:0;
	top:0;
}

/*-------------------------------
	ten list
-------------------------------*/

.ten_list li {
	position:relative;
	padding-left:1.2em;
	line-height:1.5;
}

.ten_list li:not(:last-of-type) {
	margin-bottom:0em;
}

.ten_list li::before {
	content:"・";
	display: block;
	width:1em;
	height:1em;
	position:absolute;
	left:0;
	top:0;
	line-height: 2;
}

/*-------------------------------
	maru list
-------------------------------*/

.maru_list li {
	position:relative;
	padding-left:1.5em;
	line-height:2;
}

.maru_list li:not(:last-of-type) {
	margin-bottom:1em;
}

.maru_list li::before {
	content:"";
	display: block;
	width:1em;
	height:1em;
	background:#D9B3C1;
	position:absolute;
	left:0;
	top:0.55em;
	border-radius: 50%;
}

/*-------------------------------
	blog cate time
-------------------------------*/

.cate {
	background:#C22424;
	color:#fff;
	letter-spacing: 0.1rem;
	padding:0.8em 1.4em;
	text-align:center;
	display: inline-block;	
	font-size:1.4rem;
	font-weight:500;
	z-index: 3;
}

.time {
	color:#000000;
	font-size:1.4rem;
	position:relative;
	letter-spacing: 0.1rem;
}

/*-------------------------------
	header
-------------------------------*/

.header_fv {
	width:100%;
	position:relative;
	padding:6rem 0;
	margin-bottom:10rem;
}

header {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index: 99;
}

.header_inner {
	height:100%;
	padding:6rem 10rem;
}

.header_logo {
	width:20rem;
}

.header_nav .contact_btn {
	display: none;
}

/*-------------------------------
	nav
-------------------------------*/

.header_nav {
	height:100%;
	display: flex;
	align-items: flex-end;
}

@media screen and (min-width:769px) {

.header_nav {
	display: flex!important;
}
} /* over 769 */

.nav_list li:not(:last-of-type) {
	margin-bottom:0.5em;
}

.nav_list li {
	text-align:right;
}

.nav_list li a {
	display: inline-block;
	font-size:2rem;
	font-weight:500;
	letter-spacing: 0.04em;
	padding:0.5em 0;
	transition:color .5s;
}

.nav_list li a:hover {
	color:#00AFCC;
}


/*-------------------------------
	hamburger
-------------------------------*/
.hamburger {
	display : none;
	position: relative;
	z-index : 3;
	width : 12rem;
	height: 4rem;
	cursor: pointer;
	background:#00AFCC;
	border-radius:2rem;
	margin-left:auto;
	justify-content: center;
	align-items: center;
}

.hamburger h4 {
	color:#fff;
	font-size:1.1rem;
	letter-spacing: 0.02em;
}

.hamburger .ham_line {
	position:relative;
	width:2.4rem;
	height:1.5rem;
	margin-left:1.1rem;
}

.hamburger span {
  display : block;
  position: absolute;
  width   :100%;
  height  : 0.1rem;
  left    : 0;
  background : #fff;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  top:0.7rem;
}
.hamburger span:nth-child(3) {
  top: 1.4rem;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top:0.75rem;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top:0.75rem;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

/*-------------------------------
	footer
-------------------------------*/

footer {
	width:100%;
	padding:10rem 0 8rem;
}

.footer_inner {
	width:100%;
	max-width:128rem;
	padding:0 8rem;
	margin:0 auto;
}

.footer_info {
	width:30rem;
}

.footer_logo {
	width:30rem;
	margin-bottom:5rem;
}

.footer_info address {
	font-style: normal;
	font-weight:500;
}

.footer_info .post_no {
	line-height:1.25;
	margin-bottom:3rem;
}

.footer_info .post_no span {
	font-size:1.6rem;
}

.footer_no li:not(:last-of-type) {
	margin-bottom:1rem;
}

.footer_no p,
.footer_no a {
	display: block;
	padding:0 0 0 2.75em;
	font-size:2rem;
	position:relative;
	letter-spacing: 0.04em;
	line-height:1.25;
}

.footer_no p::before,
.footer_no a::before {
	content:attr(data-name);
	display: block;
	font-size:1.2rem;
	color:#00AFCC;
	width:4.8rem;
	height:2.4rem;
	line-height:2.2rem;
	box-sizing: border-box;
	border:1px solid #00AFCC;
	border-radius:1.2rem;
	text-align: center;
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	margin:auto 0;
}

.footer_nav {
	max-width:34rem;
}

.footer_contact {
	position:relative;
}

.contact_btn {
	display: flex;
	align-items: center;
	width:34rem;
	height:14rem;
	padding:0 10rem 0 4rem;
	background:#444;
	position:relative;
}

.contact_btn::before {
	content:"";
	display: block;
	width:100%;
	height:100%;
	background:#00AFCC;
	position:absolute;
	left:0;
	top:0;
	transition:transform .4s;
	transform:scale(0,1);
	transform-origin:right;
}

.contact_btn:hover::before {
	transform:scale(1,1);
	transform-origin:left;
}

.contact_btn .link_nav_txt {
	color:#fff;
}

.contact_btn .link_nav_btn {
	background:#fff;
	border-color:#444;
	right:4rem;
}

.contact_btn .link_nav_btn svg {
	fill:#444;
}

.contact_btn:hover .link_nav_btn {
	border-color:#444;
}

.contact_btn .link_nav_btn::before {
	background:#444;
}

.contact_btn .link_nav_btn::after {
	background:linear-gradient(90deg, #fff 0%, #fff 50%, #444 50%, #444 100%);
}

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

.copy_wrap small {
	font-size:1.4rem;
	font-weight:500;
	letter-spacing: 0.04em;
}

/*-------------------------------
	bg medicine
-------------------------------*/

.bg_medicine {
	position:absolute;
	left:50%;
	top:0;
	width:100%;
	height:100%;
	transform:translateX(-50%);
	z-index: -1;
}

.bg_medicine figure {
	position:absolute;
}

.bg_medicine01 {
	width:19.4rem;
}


.bg_medicine02 {
	width:44.1rem;
}

.bg_medicine03 {
	width:15.8rem;
}

.bg_medicine04 {
	width:42rem;
}

.bg_medicine05 {
	width:18.7rem;
}

.bg_medicine01 img,
.bg_medicine05 img {
	animation: FloatVertical 8s ease-in-out infinite alternate;
}

.bg_medicine02 img,
.bg_medicine03 img,
.bg_medicine04 img {
	animation: FloatHorizontal 6s ease-in-out infinite alternate;
}

.bg_medicine03 img {
	animation-delay: 0.2s;
}

.bg_medicine04 img {
	animation-delay: 0.4s;
}

.bg_medicine05 img {
	animation-delay: 0.8s;
}

@keyframes FloatHorizontal{
	0%{
		transform: translate3d(2rem,1rem,0) rotate(12deg);
	}
	50%{
		transform: translate3d(-2rem,-1rem,0) rotate(-12deg);
	}
	100%{
		transform: translate3d(2rem,1rem,0) rotate(12deg);
	}
}
@keyframes FloatVertical{
	0%{
		transform: translate3d(0, 2rem,0) rotate(12deg);
	}
	50%{
		transform: translate3d(0,-2rem,0) rotate(-12deg);
	}
	100%{
		transform: translate3d(0,2rem,0) rotate(12deg);
	}
}

/*-------------------------------
	sub fv
-------------------------------*/

.subfv_inner {
	width:100%;
	padding:11rem 27rem 0rem 10rem;
	position:relative;
}

.subfv h1 {
	font-size:4.8rem;
	letter-spacing: 0.04em;
	font-weight:400;
	line-height:1;
	margin-bottom:0.75em;
	color:#999;
}

.subfv h1::after {
	content:"/ " attr(data-en);
	display: inline-block;
	font-size:2.4rem;
	padding-left:0.5em;
	position:relative;
	top:-0.15em;
	letter-spacing: 0.02em;
	color:#999;
}

.subfv_img {
	width:100%;
	height:19.444444444444444vw;
	min-height:28rem;
	position:relative;
}

.subfv_img::before {
	content:"";
	display: block;
	width:100%;
	height:100%;
	background:rgba(255,255,255,0.62);
	position:absolute;
	left:0;
	top:0;
}

/*-------------------------------
	dl list
-------------------------------*/

.dl_list dt,
.dl_list dd {
	border-bottom:1px solid #ddd;
}

/*-------------------------------
	responsive
-------------------------------*/

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

.header_inner {
	padding:6rem 6rem;
}

.footer_inner {
	padding:0 6rem;
}

.contact_btn {
	width:30rem;
	padding:0 8rem 0 2rem;
}

.contact_btn .link_nav_btn {
	right:2rem;
}

/*-------------------------------
	sub fv
-------------------------------*/

.subfv_inner {
	padding:11rem 24rem 0rem 6rem;
}


} /* end 1260px */
/*-------------------------------
	ver sp
-------------------------------*/

/* font-size ---
if : window size = 750px 
*/


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

/*-------------------------------
	基本設定
-------------------------------*/

/*
計算式：10(px) / 375(px) * 100 = 2.666666666666667
画面幅375pxの時に "font-size: 1rem; = 10px " 相当になる
ex) font-size:1.6rem = 16px（375pxのとき）
*/

html{
	font-size: 2.666666666666667vw;
}

body{
	font-size: 1.6rem;
}

.pc_none {
	display:block;
}

.sp_none {
	display:none;
}

main {
	padding-bottom:0rem;
}

.inner {
	width:100%;
	margin:0 auto;
	padding:0 3rem;
}

p {
	font-size:1.8rem;
}

/*-------------------------------
	flex
-------------------------------*/

.d_flex {
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

/*-------------------------------
	btn
-------------------------------*/

.btn {
	margin:0 auto;
}

/*-------------------------------
	h_title
-------------------------------*/

.h_title {
	font-size:3rem;
}

.h_title::before {
	font-size:1.5rem;
}

/*-------------------------------
	uline_title
-------------------------------*/

.uline_title {
	font-size:2rem;
}

/*-------------------------------
	header
-------------------------------*/

.header_fv {
	padding:8rem 0;
	margin-bottom:0;
}

header {
	height:auto;
	position:fixed;
	left:0;
	top:0;
	background-color:rgba(255,255,255,0.7);
}

.header_inner {
	height:100%;
	padding:2rem 2rem;
	align-items: center;
}

.header_logo {
	width:12.5rem;
}

.header_nav .header_logo {
	width:20rem;
	margin:0 auto 3.5rem;
}

.hamburger {
	display: flex;
}

/*-------------------------------
	nav
-------------------------------*/

.header_nav {
	width:100%;
	overflow-y:auto;
	background:#fff;
	position:fixed;
	top:0;
	left:0;
	display: none;
	padding:9rem 3rem 7rem;
}

.header_nav .contact_btn {
	display: flex;
}

.header_nav .link_nav li {
	border-color:#444;
}

.header_nav .link_nav li a {
	padding-top:2.5rem;
	padding-bottom:2.5rem;
}


/*-------------------------------
	footer
-------------------------------*/

footer {
	width:100%;
	padding:6rem 0 2rem;
}

.footer_inner {
	width:100%;
	max-width:100%;
	padding:0 3rem;
	margin:0 auto;
}

.footer_wrap {
	display: block;
}

.footer_info {
	width:100%;
}

.footer_logo {
	width:21rem;
	margin-bottom:3rem;
}

.footer_info .post_no {
	margin-bottom:2rem;
}

.footer_no p,
.footer_no a {
	font-size:2.4rem;
}

.footer_no p::before,
.footer_no a::before {
	font-size:1.4rem;
	width:5.6rem;
	height:2.8rem;
	line-height:2.6rem;
	border-radius:1.4rem;
}

.contact_btn {
	width:100%;
	height:8rem;
	padding:0 8rem 0 1.6rem;
}

.contact_btn .link_nav_btn {
	right:1.6rem;
}

.footer_nav {
	width:100%;
	max-width:100%;
	margin-top:3rem;
}

.footer_nav .link_nav li:last-of-type {
	border-bottom:none;
}

.copy_wrap {
	position:relative;
	right:auto;
	bottom:auto;
	margin-top:3rem;
	padding-top:1.5rem;
	border-top:1px solid #ddd;
	text-align: right;
}

.copy_wrap small {
	font-size:1.4rem;
}

/*-------------------------------
	bg medicine
-------------------------------*/

.bg_medicine01 {
	width:9.7rem;
}

.bg_medicine02 {
	width:22rem;
}

.bg_medicine03 {
	width:7.9rem;
}

.bg_medicine04 {
	width:21rem;
}

.bg_medicine05 {
	width:9.3rem;
}

.bg_medicine04 img {
	animation: FloatVertical 8s ease-in-out infinite alternate;
}

@keyframes FloatHorizontal{
	0%{
		transform: translate3d(1rem,0.5rem,0) rotate(12deg);
	}
	50%{
		transform: translate3d(-1rem,-0.5rem,0) rotate(-12deg);
	}
	100%{
		transform: translate3d(1rem,0.5rem,0) rotate(12deg);
	}
}
@keyframes FloatVertical{
	0%{
		transform: translate3d(0, 1rem,0) rotate(12deg);
	}
	50%{
		transform: translate3d(0,-1rem,0) rotate(-12deg);
	}
	100%{
		transform: translate3d(0,1rem,0) rotate(12deg);
	}
}

/*-------------------------------
	sub fv
-------------------------------*/

.subfv_inner {
	padding:8rem 2rem 0rem 2rem;
}

.subfv h1 {
	font-size:3rem;
}

.subfv h1::after {
	font-size:1.6rem;
}

.subfv_img {
	height:19.3rem;
	min-height:auto;
}




} /* end 768px */