/*
========================================
 baby_style.css
 babyindex.html 専用CSS
 Part1
========================================
*/


/* ================================
   基本設定
================================ */

html {
	font-family: sans-serif;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	scroll-behavior:smooth;
}
body {
	font-family:
 "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
	line-height:1.5;
	color:var(--color-text-dark);
	margin:0;
}
:root {
 --color-primary:#F27E63;
 --color-tertiary:#59ABA4;
 --color-fourth:#E6E6E6;
 --color-fifth:#04BFAD;
 --color-sixth:#C2412B;
 --color-text-light:#fff;
 --color-text-dark:#4A4644;
 --space-1:.5rem;
 --space-2:1rem;
 --space-3:1.5rem;
 --space-4:2rem;
 --space-5:3rem;
 --space-6:4rem;
 --box-shadow-1:
 0 1px 1px rgba(0, 0, 0, .14), 0 1px 5px rgba(0, 0, 0, .12);
 --box-shadow-2:
 6px 6px 8px -4px rgba(0, 0, 0, .15);
}
 *, *::before, *::after {
 box-sizing:border-box;
}
img {
	max-width:100%;
	height:auto;
	display:block;
}
a {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
main, article, aside, footer, header, nav, section {
	display:block;
	position:relative;
}
.hidden {
	display:none;
}
h1 {
	color:var(--color-primary);
}
h2 {
	color:var(--color-tertiary);
}
h3 {
	color:#444;
}
h4 {
	color:rebeccapurple;
}
strong {
	color:var(--color-tertiary);
}
em {
	color:rebeccapurple;
	font-weight:bold;
}
li {
	list-style-type:none;
	line-height:2;
}
p {
	text-indent:1.5em;
}
/* ================================
   タイトル
================================ */


.target {
	font-size:
 clamp(32px, 5vw, 56px);
	line-height:1.3;
	font-weight:bold;
}
/* ================================
   ロゴ・サイトマップ
================================ */


.logo {
	display:block;
	position:fixed;
	top:0;
	width:15%;
	z-index:10;
}
.sitemap {
	width:100%;
	text-align:right;
}
.sitemap a:link, .sitemap a:visited {
	margin:var(--space-4);
	color:var(--color-tertiary);
}
/* ================================
   ヘッダー
================================ */


.header {
	position:relative;
	padding:0 0 20px;
}
.center {
	text-align:center;
	padding-bottom:20px;
}
/* ================================
   グローバルナビ
================================ */


.global-nav {
	margin-top:0;
	border-bottom:
 1px solid var(--color-sixth);
	text-align:right;
}
.global-nav .nav-item {
	display:inline-block;
	margin:0 60px;
}
.global-nav .nav-item a {
	display:inline-block;
	height:30px;
	line-height:30px;
	text-align:center;
	border-radius:8px;
	color:#444;
	width:120%;
 transition:.15s;
	letter-spacing:1px;
}
/* ================================
   ハンバーガーメニュー
================================ */


.wrapper {
 transition:
 transform .6s cubic-bezier(.215, .61, .355, 1);
}
#navTgl {
	display:none;
}
label {
	cursor:pointer;
	position:fixed;
	top:0;
	left:0;
}
.open {
	z-index:20;
	width:48px;
	height:48px;
	background:lightSeaGreen;
 transition:
 background .6s, transform .6s cubic-bezier(.215, .61, .355, 1);
}
 .open span, .open::before, .open::after {
 content:"";
 position:absolute;
 top:calc(50% - 1px);
 left:30%;
 width:40%;
 border-bottom:2px solid white;
 transition:
 transform .6s cubic-bezier(.215, .61, .355, 1);
}
 .open::before {
 transform:translateY(-8px);
}
 .open::after {
 transform:translateY(8px);
}
.close {
	z-index:1;
	width:100%;
	height:100%;
	pointer-events:none;
 transition:
 background .6s;
}
#navTgl:checked + .open {
	background:indianRed;
	transform:translateX(250px);
}
#navTgl:checked + .open span {
	transform:scaleX(0);
}
 #navTgl:checked + .open::before {
 transform:rotate(45deg);
}
 #navTgl:checked + .open::after {
 transform:rotate(-45deg);
}
 #navTgl:checked ~ .close {
 pointer-events:auto;
 background:rgba(0, 0, 0, .3);
}
/* ================================
   ドロワーメニュー
================================ */


.menu {
	z-index:10;
	position:fixed;
	overflow:auto;
	top:0;
	left:0;
	width:250px;
	height:100%;
	margin:0;
	padding:10px;
	background:rgba(0, 0, 0, .6);
	transform:translateX(-100%);
 transition:
 transform .6s cubic-bezier(.215, .61, .355, 1);
}
.menu h2, .menu a {
	color:white;
}
.menu h2 {
	text-align:center;
}
.menu ul {
	margin:0;
	padding:0;
}
.menu li {
	font-size:.8em;
	line-height:1.4;
}
 .menu li:not(:first-child) {
 border-top:
 1px solid rgba(255, 255, 255, .6);
}
.menu a {
	display:block;
	padding:1em 2em;
 transition:background .6s;
}
.menu a:hover {
	background:black;
}
 #navTgl:checked ~ .menu {
 transform:none;
}
/*
========================================
 baby_style.css
 Part2

 guide
 Medical
 container
 box
 head-wrapper
========================================
*/


/* ================================
   ガイドメニュー
================================ */


.guide {
	width:100%;
	height:auto;
}
.guide-wrapper {
	display:flex;
	display:-webkit-flex;
	flex-wrap:wrap;
	width:60%;
	justify-content:center;
	align-items:center;
	margin:0 auto;
}
.guide-box {
	width:16%;
	border-left:
 0.1px solid lightcyan;
	border-right:
 0.1px solid lightcyan;
	padding:0 20px;
	text-align:center;
}
.guide-icon {
	height:auto;
	margin-bottom:10px;
 transition:
 transform .3s;
}
.guide-icon:hover {
	transform:rotate(360deg);
}
.guide-title {
	margin:10px 0;
	font-weight:bold;
	color:#6DAFE0;
 transition:
 transform .3s;
	display:block;
}
.guide-title:hover {
	transform:translateY(-20px);
}
/* ================================
   Medical 共通ブロック
================================ */


.Medical {
	max-width:80%;
	width:80%;
	margin:auto;
	margin-top:var(--space-2);
	padding:var(--space-2);
	margin-bottom:var(--space-2);
}
.container {
	display:flex;
	display:-webkit-flex;
	flex-wrap:wrap;
	padding:var(--space-2);
}
.box {
	padding:var(--space-1);
	flex:1;
	white-space:normal;
	overflow-wrap:break-word;
	margin:var(--space-1);
}
/* ================================
   文章調整
================================ */


.Medical h1, .Medical h2, .Medical h3, .Medical h4 {
	margin-top:var(--space-2);
}
.Medical h3 {
	line-height:1.8;
}
.Medical p {
	line-height:1.8;
}
.Medical ul {
	padding-left:20px;
}
.Medical li {
	line-height:1.8;
	list-style:none;
}
/* ================================
   スライダー周辺
================================ */


.head-wrapper {
	width:1050px;
	margin:0 auto;
	white-space:nowrap;
	margin-bottom:var(--space-4);
}
.head-wrapper .box {
	margin-bottom:15px;
	padding:10px 15px;
	line-height:1.8;
}
/* ================================
   Swiper 共通
================================ */


.swiper {
	width:600px;
	max-width:100%;
	height:auto;
	margin:0 auto;
}
.swiper-slide img {
	width:100%;
	height:auto;
	object-fit:cover;
}
.swiper-pagination {
	position:relative;
	margin-top:15px;
}
.swiper-button-next, .swiper-button-prev {
	color:#04ADBF;
}
.swiper-pagination-bullet-active {
	background:#04ADBF;
}
.santeSwiper {
	width:100%;
	max-width:1050px;
	margin:0 auto;
}
.santeSwiper img {
	width:100%;
	height:auto;
	display:block;
}
/* ================================
   おむつ使用シーン
================================ */


.parti {
	width:100%;
	height:auto;
	background-image:
 url('../images/parti/birdview.jpg');
	background-repeat:no-repeat;
	background-position:top center;
}
.parti-wrapper {
	display:flex;
	flex-wrap:wrap;
	max-width:1200px;
	width:100%;
	margin:0 auto;
	margin-bottom:var(--space-4);
	justify-content:center;
}
.parti-box {
	width:250px;
	height:250px;
	text-align:left;
	position:relative;
	margin:40px;
}
.parti-box img {
	width:250px;
	height:250px;
	padding:20px;
	display:block;
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
}
.parti-box img {
 transition:
 transform .5s linear;
}
.parti-box img:hover {
	transform:scale(1.2);
}
.parti-banner {
	width:65%;
	height:auto;
	margin:0 auto;
}
/* ================================
   トップへ戻る
================================ */


.scrollToTop {
	color:var(--color-text-light);
	font-size:1.4em;
	box-shadow:var(--box-shadow-1);
	width:50px;
	height:50px;
	border-radius:50%;
	border:none;
	outline:none;
	background:var(--color-primary);
	z-index:9999;
	bottom:var(--space-2);
	right:var(--space-2);
	position:fixed;
	opacity:0;
	visibility:hidden;
}
/* ================================
   アンカー位置調整
================================ */


.target {
	position:relative;
}
.target-anchor {
	position:absolute;
	top:-72px;
	left:0;
}
/*
========================================
 baby_style.css
 Part3

 footer
 copyright
 responsive
 mobile
========================================
*/


/* ================================
   フッター
================================ */


footer {
	width:100%;
	padding:var(--space-2);
	background:var(--color-fifth);
	color:var(--color-text-light);
}
footer a:link, footer a:visited {
	color:var(--color-text-light);
}
/* ================================
   フッター3列
================================ */


.trois {
	display:flex;
	display:-webkit-flex;
	flex-wrap:wrap;
	width:70%;
	margin:0 auto;
}
.trois-list {
	width:30%;
	margin:var(--space-2);
	flex:1;
}
.trois-list li {
	line-height:2;
}
/* ================================
   コピーライト
================================ */


.copyright {
	border-bottom:solid;
	border-color:var(--color-text-light);
	text-align:center;
	padding:10px;
}
/* ================================
   横並びリンク
================================ */


.horizontal-list {
	width:80%;
	margin:0 auto;
	padding:10px 0;
	text-align:right;
}
.horizontal-list .horizontal-item {
	display:inline-block;
	padding:15px;
	letter-spacing:1px;
}



/* ================================
   レスポンシブ
================================ */


/* 1200px以下 */

@media (max-width:1200px) {
 .Medical, .head-wrapper, .guide, .box {
 max-width:100%;
 width:100%;
 margin:0;
 padding:var(--space-1);
}
 .trois {
 width:100%;
 height:auto;
 margin:0;
 padding:var(--space-1);
}
}



/* 1024px以下 */

@media (max-width:1024px) {
 body {
 background-image:none;
}
 .Medical, .head-wrapper {
 width:100%;
 margin:0;
 padding:var(--space-1);
}
 .container, .box {
 flex-direction:column;
}
 .parti-box img {
 width:60%;
 height:60%;
}
 .trois, .trois-list, .horizontal-list {
 width:100%;
 height:auto;
 margin:0;
 padding:var(--space-1);
}
 .guide-wrapper {
 width:90%;
}
 .guide-box {
 width:20%;
}
}



/* ================================
   PCのみ
================================ */


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



/* ================================
   スマートフォン
================================ */


@media (max-width:600px) {
 html {
 font-size:80%;
 margin:0;
}
 body {
 margin:0;
}
 footer {
 padding:0;
}
 main {
 margin:var(--space-1);
}
 .global-nav, .nav-item {
 display:none;
}
 .logo {
 position:fixed;
 top:0;
 left:50px;
 width:50%;
}
 .head-wrapper {
 margin-top:var(--space-5);
 white-space:nowrap;
}
 .container, .box {
 width:100%;
 height:auto;
}
 .container, .guide, .box {
 flex-direction:column;
}
 .trois-list, .horizontal-list {
 width:100%;
 height:auto;
 margin:0;
 padding:var(--space-1);
}
 .button {
 font-size:.4em;
 width:80px;
 height:40px;
 border-radius:2px;
 margin:0;
 padding:var(--space-1);
 background:var(--color-primary);
}
 .guide-wrapper {
 width:100%;
}
 .guide-box {
 width:100%;
 padding:10px;
}
 .parti-wrapper {
 flex-direction:column;
 align-items:center;
}
 .parti-box {
 margin:20px auto;
}
 .parti-box img {
 width:250px;
 height:250px;
}
 .horizontal-list {
 text-align:center;
}
 .horizontal-list .horizontal-item {
 display:block;
 padding:10px;
}
}
/*
========================================
 baby_style.css
 babyindex.html 専用CSS
 Part1
========================================
*/


/* ================================
   基本設定
================================ */

html {
	font-family: sans-serif;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	scroll-behavior:smooth;
}
body {
	font-family:
 "Lucida Grande",  "segoe UI",  "ヒラギノ丸ゴ ProN W4",  "Hiragino Maru Gothic ProN",  Meiryo,  Arial,  sans-serif;
	line-height:1.5;
	color:var(--color-text-dark);
	margin:0;
}
:root {
 --color-primary:#F27E63;
 --color-tertiary:#59ABA4;
 --color-fourth:#E6E6E6;
 --color-fifth:#04BFAD;
 --color-sixth:#C2412B;
 --color-text-light:#fff;
 --color-text-dark:#4A4644;
 --space-1:.5rem;
 --space-2:1rem;
 --space-3:1.5rem;
 --space-4:2rem;
 --space-5:3rem;
 --space-6:4rem;
 --box-shadow-1:
 0 1px 1px rgba(0, 0, 0, .14),  0 1px 5px rgba(0, 0, 0, .12);
 --box-shadow-2:
 6px 6px 8px -4px rgba(0, 0, 0, .15);
}
 *, *::before, *::after {
 box-sizing:border-box;
}
img {
	max-width:100%;
	height:auto;
	display:block;
}
a {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
main, article, aside, footer, header, nav, section {
	display:block;
	position:relative;
}
.hidden {
	display:none;
}
h1 {
	color:var(--color-primary);
}
h2 {
	color:var(--color-tertiary);
}
h3 {
	color:#444;
}
h4 {
	color:rebeccapurple;
}
strong {
	color:var(--color-tertiary);
}
em {
	color:rebeccapurple;
	font-weight:bold;
}
li {
	list-style-type:none;
	line-height:2;
}
p {
	text-indent:1.5em;
}
/* ================================
   タイトル
================================ */


.target {
	font-size:
 clamp(32px, 5vw, 56px);
	line-height:1.3;
	font-weight:bold;
}
/* ================================
   ロゴ・サイトマップ
================================ */


.logo {
	display:block;
	position:fixed;
	top:0;
	width:15%;
	z-index:10;
}
.sitemap {
	width:100%;
	text-align:right;
}
.sitemap a:link, .sitemap a:visited {
	margin:var(--space-4);
	color:var(--color-tertiary);
}
/* ================================
   ヘッダー
================================ */


.header {
	position:relative;
	padding:0 0 20px;
}
.center {
	text-align:center;
	padding-bottom:20px;
}
/* ================================
   グローバルナビ
================================ */


.global-nav {
	margin-top:0;
	border-bottom:
 1px solid var(--color-sixth);
	text-align:right;
}
.global-nav .nav-item {
	display:inline-block;
	margin:0 60px;
}
.global-nav .nav-item a {
	display:inline-block;
	height:30px;
	line-height:30px;
	text-align:center;
	border-radius:8px;
	color:#444;
	width:120%;
 transition:.15s;
	letter-spacing:1px;
}
/* ================================
   ハンバーガーメニュー
================================ */


.wrapper {
 transition:
 transform .6s cubic-bezier(.215, .61, .355, 1);
}
#navTgl {
	display:none;
}
label {
	cursor:pointer;
	position:fixed;
	top:0;
	left:0;
}
.open {
	z-index:20;
	width:48px;
	height:48px;
	background:lightSeaGreen;
 transition:
 background .6s,  transform .6s cubic-bezier(.215, .61, .355, 1);
}
 .open span, .open::before, .open::after {
 content:"";
 position:absolute;
 top:calc(50% - 1px);
 left:30%;
 width:40%;
 border-bottom:2px solid white;
 transition:
 transform .6s cubic-bezier(.215, .61, .355, 1);
}
 .open::before {
 transform:translateY(-8px);
}
 .open::after {
 transform:translateY(8px);
}
.close {
	z-index:1;
	width:100%;
	height:100%;
	pointer-events:none;
 transition:
 background .6s;
}
#navTgl:checked + .open {
	background:indianRed;
	transform:translateX(250px);
}
#navTgl:checked + .open span {
	transform:scaleX(0);
}
 #navTgl:checked + .open::before {
 transform:rotate(45deg);
}
 #navTgl:checked + .open::after {
 transform:rotate(-45deg);
}
 #navTgl:checked ~ .close {
 pointer-events:auto;
 background:rgba(0, 0, 0, .3);
}
/* ================================
   ドロワーメニュー
================================ */


.menu {
	z-index:10;
	position:fixed;
	overflow:auto;
	top:0;
	left:0;
	width:250px;
	height:100%;
	margin:0;
	padding:10px;
	background:rgba(0, 0, 0, .6);
	transform:translateX(-100%);
 transition:
 transform .6s cubic-bezier(.215, .61, .355, 1);
}
.menu h2, .menu a {
	color:white;
}
.menu h2 {
	text-align:center;
}
.menu ul {
	margin:0;
	padding:0;
}
.menu li {
	font-size:.8em;
	line-height:1.4;
}
 .menu li:not(:first-child) {
 border-top:
 1px solid rgba(255, 255, 255, .6);
}
.menu a {
	display:block;
	padding:1em 2em;
 transition:background .6s;
}
.menu a:hover {
	background:black;
}
 #navTgl:checked ~ .menu {
 transform:none;
}