@charset"utf-8";
/*
KyotoDobutsu LP2023 --  Primary CSS
Author : MONTAGE lab.(https://www.montagelab.jp)
Latest Updated : 19 Jan. 2023
*/

/**
 * Table of Contents
 *
 * 1.0 - Typography
 * 2.0 - Elements
 * 3.0 - Alignment
 * 4.0 - Links
 * 5.0 - Navigations
 * 6.0 - layout
 * 7.0 - Clearfix
 * 8.0 - Forms
 * ex. - Media Queries
 *
 */

/* **************************************************************************** */
/*
/* 1.0 Typography
/*
/* **************************************************************************** */

/**
 * 1.2 Typo
 */

body,
button,
input,
select,
textarea {
	font-family: "Roboto", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", sans-serif;
	font-size: 1.5rem;
	line-height: 1;
	color: #000;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: 700;
}
h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 { margin-top:0 !important;}

h1	{ font-size:3rem;}
h2	{ font-size:2.6rem;}
h3	{ font-size:1.9rem;}
h4	{ font-size:1.6rem;}
h5	{ font-size:1.4rem;}
h6	{ font-size:1.4rem;}

p {}

b,
strong 	{ font-weight: 700;}

em		{ font-style: normal;}

dfn,
cite,
i { font-style: italic;}

blockquote {
	border-left: 4px solid #707070;
	border-left: 4px solid rgba(51, 51, 51, 0.7);
	color: #707070;
	color: rgba(51, 51, 51, 0.7);
	font-size: 18px;
	font-size: 1.8rem;
	font-style: italic;
	line-height: 1.6667;
	margin-bottom: 1.6667em;
	padding-left: 0.7778em;
}

blockquote p { margin-bottom: 1.6667em;}
blockquote > p:last-child { margin-bottom: 0;}

blockquote cite,
blockquote small {
	color: #333;
	font-size: 15px;
	font-size: 1.5rem;
	font-family: "Noto Sans", sans-serif;
	line-height: 1.6;
}

blockquote em,
blockquote i,
blockquote cite {
	font-style: normal;
}

blockquote strong,
blockquote b {
	font-weight: 400;
}

address {
	font-style: normal;
	margin: 0;
}

code,
kbd,
tt,
var,
samp,
pre {
	font-family: Inconsolata, monospace;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre {
	background-color: transparent;
	background-color: rgba(0, 0, 0, 0.01);
	border: 1px solid #eaeaea;
	border: 1px solid rgba(51, 51, 51, 0.1);
	line-height: 1.2;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 0.8em;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

abbr[title] {
	border-bottom: 1px dotted #eaeaea;
	border-bottom: 1px dotted rgba(51, 51, 51, 0.1);
	cursor: help;
}

mark,
ins 	{ background-color: #fff9c0; text-decoration: none;}

sup,
sub 	{ font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline;}
sup		{ bottom: 1ex;}
sub		{ top: .5ex;}

small	{ font-size: 75%;}

big		{ font-size: 125%;}




/**
 * - 1.3 Lists
 */

ul,
ol { margin: 1.6em 0 1.6em; list-style-position:outside; line-height:1.5;}

ul { margin-left:0.7em; list-style: none;}

ol { margin-left:1.5em; list-style: decimal;}

li > ul,
li > ol {
	margin: 1em 0 1em 1.3333em;
}
li > ol li:before { content:''; width:0; height:0; border:0 !important;}

nav ul { margin:0;}

article ul li { position:relative; margin:0 0 0.8em; padding-left:10px;}
article ul li:before { position:absolute; content:''; top:0.4em; left:0; width:4px; height:4px; background-color:#000; border-radius:100%;}
article ol li { position:relative; margin:0 0 0.8em;}

ol.numbering	{ list-style:none; margin-left:0;}
ol.numbering li	{ position:relative; padding:0 0 0 2.2em;}
ol.numbering li:before	{ position:absolute; top:-0.15em; left:0; content:''; padding:0.2em 0 0; width:1.8em; height:1.8em; text-align:center; color:#fff; background-color:#003FC3;}
ol.numbering li:nth-of-type(1):before	{ content:'1';}
ol.numbering li:nth-of-type(2):before	{ content:'2';}
ol.numbering li:nth-of-type(3):before	{ content:'3';}
ol.numbering li:nth-of-type(4):before	{ content:'4';}
ol.numbering li:nth-of-type(5):before	{ content:'5';}
ol.numbering li:nth-of-type(6):before	{ content:'6';}
ol.numbering li:nth-of-type(7):before	{ content:'7';}
ol.numbering li:nth-of-type(8):before	{ content:'8';}
ol.numbering li:nth-of-type(9):before	{ content:'9';}


/**
 * - 1.4 Table
 */

table,
th,
td {
	border: 1px solid #eaeaea;
	border: 1px solid rgba(51, 51, 51, 0.1);
}

table {
	border-collapse:collapse;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 1.6em;
	table-layout: fixed; /* Prevents HTML tables from becoming too wide */
	width: 100%;
}

caption,
th,
td { padding: 0.8em 0.4em; text-align:left; font-weight:normal;}
th { border-width:1px; font-weight: 700;}
td { border-width:1px; background-color:#fff;}

caption { margin:0.3em 0; font-size:90%; caption-side:bottom;}

thead th { vertical-align:middle; font-weight:bold; color:#fff; background-color:#30b4e8; border-right-color:#fff; border-bottom-color:#fff;}
thead th:last-child	{ border-right-color:#38C1F8;}
thead td { vertical-align:middle; background-color:#bce9fb;}

tbody th { vertical-align:middle; background-color:#bce9fb;}
tbody td { vertical-align:middle; border-color:#38C1F8; border-width:1px 1px 1px 1px;}

tfoot 	 { border-top:3px double #38C1F8;}
tfoot th { vertical-align:middle; font-weight:bold; color:#fff; background-color:#30b4e8; border-right-color:#fff; border-bottom-color:#fff;}
tfoot th:last-child	{ border-right-color:#38C1F8;}
tfoot td { vertical-align:middle; background-color:#bce9fb;}

table ul,
table ol { margin:.6em 0 .6em 0em; list-style-position:outside; line-height:1.25;}
table ul li:before { top:4px !important;}

table.text-align-center,
table.text-align-center th,
table.text-align-center td,
tr.center th,
tr.center td,
th.center,
td.center { text-align:center;}

.yscroll	{ width:100%; overflow:scroll;}
.yscroll table	{ table-layout:auto;}
.yscroll::-webkit-scrollbar			{ height: 5px;}
.yscroll::-webkit-scrollbar-track	{ background: #F1F1F1;}
.yscroll::-webkit-scrollbar-thumb	{ background: #BCBCBC;}




/**
 * - 1.5 Decoration
 */

.not	{ margin-top:0 !important; vertical-align:top;}
.nor	{ margin-right:0 !important;}
.nob	{ margin-bottom:0 !important;}
.nol	{ margin-left:0 !important;}

.nobt	{ border-top:none !important;}
.nobr	{ border-right:none !important;}
.nobb	{ border-bottom:none !important;}
.nobl	{ border-left:none !important;}

.bt		{ border-top:1px solid #ccc !important;}
.br		{ border-right:1px solid #ccc !important;}
.bb		{ border-bottom:1px solid #ccc !important;}
.bl		{ border-left:1px solid #ccc !important;}

.lead 	{ font-size:1.6rem;}
.attention { color:#f00;}
.note		{ font-size:13px; font-size:1.3rem; line-height:1.5; color:#666;}
.caption	{ font-size:13px; font-size:1.3rem; line-height:1.5; color:#666;}
.wp-caption-text{ margin:0.8rem 1.2rem 1.6rem; font-size:13px; font-size:1.3rem; line-height:1.5 !important; color:#666;}

.border 	{ border-bottom:1px solid #999;}
.bordered 	{ padding:0.8em; border:1px solid #6699FF; border-radius:5px;}
.filled		{ padding:0.5em 0.8em; background-color:#ededed;}
.filledwrap .filled { background-color:#fff;}

/* color */
.dark	{ color:#000;}
.pale	{ color:#999;}

/* family */
.serif	{ font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.sans	{ font-family: "Roboto", Helvetica, sans-serif;}

/* style */
.normal	{ font-style: normal;}
.italic	{ font-style: italic;}





/* **************************************************************************** */
/*
/* 2.0 Elements
/*
/* **************************************************************************** */

::selection {background:#CDD3CD; color:#fff;}
::-moz-selection { background:#CDD3CD; color:#fff;}

hr {
	background-color: #eaeaea;
	background-color: rgba(51, 51, 51, 0.1);
	border: 0;
	height: 1px;
	margin-bottom: 1.6em;
}
hr.none { background-color:transparent;}

img {
	-ms-interpolation-mode: bicubic;
	border: 0;
	height: auto;
	max-width: 100%;
	vertical-align: bottom;
}
.image img { width:100%;}

figure 		{ margin:0; padding:0;}
figure img 	{ width:100%; height:auto;}
figcaption 	{}

del { opacity: 0.8;}





/* **************************************************************************** */
/*
/* 3.0 Alignments
/*
/* **************************************************************************** */

.alignleft {
	display: inline;
	float: left;
	margin:0 2.6rem 1rem 0;
}

.alignright {
	display: inline;
	float: right;
	margin:0 0 1rem 2.6rem;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 1rem;
}

.left	{ text-align:left;}
.right	{ text-align:right;}
.center	{ text-align:center;}




/* **************************************************************************** */
/*
/* 4.0 Links
/*
/* **************************************************************************** */

a {
	color: #000;
	text-decoration: none;
	outline:none;
	transition:all 0.2s ease;
}

a:hover,
a:focus {
	color: #ff0000;
}

nav a { text-decoration:none;}




/* **************************************************************************** */
/*
/* 5.0 Navigation
/*
/* **************************************************************************** */


/**
 * - sns
 */

.sns ul,
ul.sns { margin:0; padding:0;}
.sns li	{ display:inline-block; vertical-align:middle; margin:0 3% 4px; padding:0;}
.sns li:before	{ background:none; border:0;}
.sns li a	{ 
	display:block; width:44px; height:44px; font-size:0; 
	background-color:#fff; background-repeat:no-repeat; background-position:center center; background-size:23px; 
	border:0 solid #fff; border-radius:100%;
}
.sns li.fb a	{ background-image:url(../img/common/icon-fb.png);}
.sns .fb a:hover { opacity: 0.8;}
.sns .tw a	{ background-image:url(../img/common/icon-tw.png);}
.sns .tw a:hover { opacity: 0.8;}
.sns .ln a	{ background-image:url(../img/common/icon-ln.png);}
.sns .ln a:hover { opacity: 0.8;}
.sns .yt a	{ background-image:url(../img/common/icon-yt.png);}
.sns .yt a:hover { opacity: 0.8;}
.sns .ig a	{
	background:url(../img/common/icon-ig.png) no-repeat center center / 40px,linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
	background:url(../img/common/icon-ig.png) no-repeat center center / 40px, radial-gradient(circle farthest-corner at 32% 106%, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
}
.sns .ig a	{
	background:#fff url(../img/common/icon-ig.png) no-repeat center center / 40px;
}



/**
 * - Buttons
 */

div.btn	{ display:block; text-align:center;}
div.btn a	{ position:relative; display:inline-block; padding:2rem 3rem; min-width:270px; text-decoration:none; font-size:1.6rem; font-weight:700; letter-spacing:0.05em; color:#5FA5B9; background-color:#fff; border-radius:100px;}
div.btn a:before	{ position:absolute; top:50%; right:21px; content:''; width:24px; height:0; border-top:1px solid #5FA5B9;}
div.btn a:after		{ position:absolute; top:calc(50% - 5px); right:20px; content:''; width:0; height:0; border:solid transparent; border-bottom-color:#5FA5B9; border-left-color:#5FA5B9; border-width:3px 4px 3px 4px;}
div.btn a:hover	{}

.arrowbtn { margin:0 20px; text-align:right; font-family:din-2014, sans-serif;}
.arrowbtn a	{ position:relative; display:inline-block; padding:0.8rem 4.4rem 0.5rem 1.8rem;}
.arrowbtn a:before	{ position:absolute; bottom:0; left:0; content:''; width:100%; height:0; border-bottom:1px solid #000;}
.arrowbtn a:after	{ position:absolute; bottom:1px; right:0; content:''; width:0; height:44px; border-right:1px solid #000; transform-origin:100% 100%; transform:rotate(-45deg)}

/* outbound icon button */
.btn.outbound a:before	{ position:absolute; top:5px; right:7px; content:''; width:10px; height:8px; border:1px solid #000;}
.btn.outbound a:after	{ position:absolute; top:9px; right:11px; content:''; width:8px; height:6px; border:solid #000; border-width:0 0 1px 1px;}
.btn.outbound a:hover:before,
.btn.outbound a:hover:after	{ border-color:#fff;}



/**
 * - Page top button
 */

#pagetop.fixed a { position:fixed; bottom:0; right:0; z-index:1000; width:50px; height:50px; background-color:#FA7402; background-color:rgba(250,116,2,.8); transition:background-color 0.2s ease;}
#pagetop.fixed a:after	{ position:absolute; top:22px; left:50%; content:''; margin:0 0 0 -6px; width:12px; height:12px; border:solid #fff; border-width:1px 1px 0 0; transform:rotate(-45deg); transition:all 0.2s ease;}
#pagetop.fixed a:hover 	{ background-color:rgba(250,116,2,1);}
#pagetop.fixed a:hover:before	{ top:8px;}
#pagetop.fixed a:hover:after 	{ top:8px;}
#pagetop.fixed a:before,
#pagetop.fixed a:after { border-color:#fff;}




/* **************************************************************************** */
/*
/* 6.0 layout
/*
/* **************************************************************************** */

body{
	text-align:center;
	background-color:#fff;
	background-size:cover;
}
#wrapper 	{}

.ss		{ display:block;}	/* .ss < 420px		*/
.mm		{ display:none;}	/* .mm < 1024px		*/
.ll		{ display:none;}	/* .ll >= 1024px	*/
.spn	{ display:block;}	/* .spn < 720px		*/
.pc		{ display:none;}	/* .pc >= 1024px	*/
.hide	{ display:none;}
.still	{ visibility:hidden; opacity:0;}
.check	{ position:fixed; z-index:9999;}
.skip-link	{ display:none; font-size:0;}
.screen-reader-text { font-size:0;}



/**
 * - 6.1 loading
 */

#loading { 
	position:fixed; top:0; left:0; z-index:9999;
	width:100%; height:100%; 
	background-color:#e4e4e4; background-color:rgba(228,228,228,1);
}
#loading span {
	display:block;
	position:absolute; top:50%; left:50%; margin: 0 0 0 -25px;
	width:50px; height:50px; background:url(../img/common/Rolling.svg) no-repeat center center / 50px;
}
#loading.loaded	{ animation:loading 0.6s ease-in-out 0s 1 normal forwards;}
@keyframes loading {
    0% { background-color:rgba(228,228,228,1);}
  100% { background-color:rgba(228,228,228,0);}
}




/**
 * - 6.2 Header Include
 */

.site-header	{ position:relative;}
#branding		{ position:absolute; top:0; left:0; z-index:2; width:100%;}
#branding .site-title	{ margin:0 auto; padding:14vh 10%; font-size:1.1rem; text-align:center;}
#branding .site-title img	{ width:100%; max-width:348px;}

.billboard	{ 
	position:relative; padding:50vh 0 0;
}
.billboard:before	{ position:absolute; top:0; left:0; content:''; width:100%; height:100%; background:url(../img/billboard-bg--s.jpg) no-repeat center center / cover;}
.billboard .image	{ position:relative; margin:0 auto; padding:0 5% 5vh; max-width:1440px;}
.billboard .image:before	{ position:absolute; top:0; left:0; content:''; width:100%; height:100%; background:url(../img/billboard-overlay--s.png) no-repeat 0 0 / cover;}
.billboard .site-catch	{ 
	position:absolute; top:25vh; left:0; width:100%; 
	text-align:center; font-size:2.4rem; font-weight:400; line-height:2.0; letter-spacing:0.05em;
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.billboard .site-catch span	{ display:inline-block; text-align:left;}


/**
 * - 6.3 footer Include
 */

.site-footer	{ position:relative; background: linear-gradient( 120deg, #F9E3EB, #E3F8FF );}


/**
 * - 6.4 container Include
 * #container > article > .content
 * 	.page-header
 * 	.page-title	
 * 	.page-content
 * 
 * #container > section > .content
 * 	.section-header	{}
 * 	.section-title	{}
 * 	.section-content{}
 * 
 */

#container	{}

.lp-course	{ position:relative; background:linear-gradient( 100deg, #FBE1E9, #E3F8FF );}

.lp-sanka1	{ position:relative; padding:0; background:linear-gradient( 120deg, #F7BACE, #C6E9FA );}
.lp-sanka1 .section-content { margin:0 auto; padding:0 !important; max-width:1140px;}
.lp-sanka1 .content { position:relative; z-index:3; padding:8rem 0 0;}
.lp-sanka1 h3		{ font-size:3.0rem; font-weight:500; text-shadow:4px 4px 0 #8CCADB;}
.lp-sanka1 h3 span	{ 
	font-size:3.8rem;font-weight:400;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.lp-sanka1 h3 span:nth-child(2)	{ font-size:4.0rem;}
.lp-sanka1 .btn	{ padding:4rem 0;}
.lp-sanka1 .image	{ position:relative; z-index:4; padding:10px 0 0;}
.lp-sanka1 .image img	{ max-width:380px;}
.lp-sanka1 .loop_text	{ top:45%; left:0;}
.lp-sanka1 .loop_text div	{ font-weight:400; color:rgba(255,255,255,.5);}

.lp-course	{}
.lp-course .section-header	{ padding:6rem 0;}
.lp-course .section-title	{ 
	margin:0 auto; padding:42px 0 0;
	text-align:center; font-size:2.0rem; font-weight:400; line-height:1; letter-spacing:0.05em;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	background:url(../img/head-clover--blue.svg) no-repeat center top / 43px auto;
}
.lp-course .section-title big	{ display:block; margin:0 0 5px; font-size:4.0rem; font-weight:300; font-family:"Josefin Sans", sans-serif; color:#5FA5B9;}
.lp-course .section-content	{ padding:0 10%;}

.gakkas	{ margin:0 auto; padding:0 0 1px; max-width:960px;}
.gakkas .gakka	{ margin-bottom:14rem; text-align:left;}
.gakkas .gakka h3	{ font-size:2.8rem; font-weight:400; line-height:1.5; font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.gakkas .gakka h3 .en	{ display:block; font-size:1.4rem; font-weight:400; letter-spacing:0.1em; font-family:"Josefin Sans", sans-serif;}
.gakkas .gakka .teiin	{ display:inline-block; margin:10px 0; padding:4px 1em; font-size:1.6rem; color:#fff; background-color:#ccc; border-radius:50px;}
.gakkas .gakka .content	{ position:relative;}
.gakkas .gakka .content:before	{ position:absolute; top:40px; left:30px; content:''; width:100%; height:100%; 
	background:repeating-linear-gradient(-45deg,rgba(255,255,255,.5), rgba(255,255,255,.5) 6px,rgba(255,255,255,.0) 0, rgba(255,255,255,.0) 14px);
	background-attachment:fixed;
}
.gakkas .gakka .content > div	{ position:relative; box-shadow:8px 8px 16px rgba(0,0,0,.1);}
.gakkas .gakka .image	{}
.gakkas .gakka .content .info	{ position:relative; padding:2rem 1.6em; background-color:#fff;}
.gakkas .gakka .content .info:before	{ position:absolute; top:0; left:10px; content:''; width:84px; height:0; border-top:1px solid #ccc; transform:rotate(-35deg);}
.gakkas .gakka .content p	{ line-height:1.8;}
.gakkas .gakka-grooming h3 .en 	{ color:#24AADB;}
.gakkas .gakka-grooming .teiin 	{ background-color:#24AADB;}
.gakkas .gakka-grooming .content .info:before 	{ border-color:#24AADB}
.gakkas .gakka-nursing h3 .en 	{ color:#6DD400;}
.gakkas .gakka-nursing .teiin 	{ background-color:#6DD400}
.gakkas .gakka-nursing .content .info:before 	{ border-color:#6DD400;}

.interval	{ height:200px;}
.interval img	{ height:200px; object-fit:cover;}

.lp-ao		{ position:relative; background-color:#fff;}
.lp-ao .loop_text	{ top:-16px; left:0;}
.lp-ao .loop_text div	{ font-weight:300; color:#8F003F;}

.lp-ao	{ padding:0 5%;}
.lp-ao .section-header	{ padding:12rem 0 6rem;}
.lp-ao .section-title	{ font-size:3.0rem; font-weight:400; line-height:1.5; font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.lp-ao .section-title .reverse	{ 
	padding:5px 0.5em;
	font-size:110%; font-weight:700; color:#fff; 
	font-family:"游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", sans-serif;
	background-color:#BD2065;
}
.lp-ao .section-title .reverse .en	{ font-weight:600; font-family:"Josefin Sans", sans-serif;}
.lp-ao .section-title .big	{}
.lp-ao .section-content	{ margin:0 auto; padding:0 0 10rem; max-width:1100px;}
.lp-ao .about-ao	{ margin:0 auto 6rem; max-width:800px;}
.lp-ao .about-ao h3	{ margin:0 0 1.2em; font-size:2.4rem;}
.lp-ao .about-ao h3 span	{ position:relative; display:inline-block; padding:0.6em 1.2em;}
.lp-ao .about-ao h3 span:before	{ position:absolute; top:0; left:8px; content:''; width:calc(100% - 16px); height:100%; border:solid #000; border-width:1px 0;}
.lp-ao .about-ao h3 span:after	{ position:absolute; top:8px; left:0; content:''; width:100%; height:calc(100% - 16px); border:solid #000; border-width:0 1px;}
.lp-ao .about-ao p	{ padding:0 5%; text-align:left; font-size:1.6rem; font-weight:700; line-height:1.8;}
.lp-ao .about-step	{ }
.lp-ao .about-step h4	{ margin:0 0 3em; font-size:2.1rem;}
.lp-ao .about-step h4 span	{ position:relative; display:inline-block; padding:0.4em 1.0em;}
.lp-ao .about-step h4 span:before	{ position:absolute; top:0; left:0; content:''; width:100%; height:100%; border:1px solid #000; border-radius:10px;}
.lp-ao .about-step h4 span:after	{ position:absolute; bottom:-7px; left:40px; content:''; width:14px; height:14px; background-color:#fff; border:solid #000; border-width:0 1px 1px 0; transform:skew(0, 45deg)}
.lp-ao .about-step ol	{ margin:0 auto; padding:0; width:240px; list-style:none;}
.lp-ao .about-step li	{ position:relative; margin:0 0 6rem; padding:0;}
.lp-ao .about-step li:before	{ position:absolute; bottom:-30px; left:50%; content:''; width:0; height:30px; border-left:1px solid #7DB7C8;}
.lp-ao .about-step li:after		{ position:absolute; bottom:-30px; left:calc(50% - 4.5px); content:''; width:0; height:0; border:solid transparent; border-top-color:#7DB7C8; border-width:9px 5px 0 5px;}
.lp-ao .about-step li:last-child:before, .lp-ao .about-step li:last-child:after	{ border:0;}
.lp-ao .about-step li .num	{ 
	position:absolute; top:-28px; left:-30px; display:block; padding:10px 0 0 16px; width:60px; height:60px; 
	text-align:left; font-size:2.1rem; font-family:"Josefin Sans", sans-serif; 
	border:1px solid #000; border-radius:100px;
}
.lp-ao .about-step li p	{ position:relative; display:flex; justify-content:center; align-items:center; padding:1.6rem 1rem; height:5.4em; color:#fff; background-color:#7DB7C8; border-radius:10px; border:4px solid #fff;}

.lp-ao .about-mv	{ margin:6rem auto 0; padding:4rem 8%; max-width:1100px; border:2px solid #BD2065; border-radius:10px;}
.lp-ao .about-mv h3	{ 
	margin:0 auto 1.8em; padding:34px 0 0;
	text-align:center; font-size:1.8rem; font-weight:400; line-height:1; letter-spacing:0.05em;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	background:url(../img/head-clover--pink.svg) no-repeat center top / 43px auto;
}
.lp-ao .about-mv .videos	{}
.lp-ao .about-mv .video		{ margin:0 0 3rem;}
.lp-ao .about-mv .video a	{ position:relative; display:block;}
.lp-ao .about-mv .video a:before	{ position:absolute; top:calc(50% - 16px); left:calc(50% - 30px); content:''; width:60px; height:32px; background-color:#FF0000; border-radius:10px;}
.lp-ao .about-mv .video a:after	{ position:absolute; top:calc(50% - 7px); left:calc(50% - 6px); content:''; width:0; height:0; border:solid transparent; border-width:7px 0 7px 12px; border-left-color:#fff;}
.lp-ao .btn	{}
.lp-ao .btn a	{ padding:2rem 5rem; color:#000; background:linear-gradient( 120deg, #F3C8C8, #DD96B6 );}
.lp-ao .btn a:before	{ border-color:#fff;}
.lp-ao .btn a:after		{ border-bottom-color:#fff; border-left-color:#fff;}


.lp-sanka2	{ position:relative; padding:6rem 0 0; background:linear-gradient( 120deg, #F7BBCF, #C2EFFF );}
.lp-sanka2	.section-content {}
.lp-sanka2	.section-content .content { position:relative; z-index:2;}
.lp-sanka2 h3	{ font-size:3.0rem; font-weight:400; line-height:1.5;}
.lp-sanka2 h3 span	{ font-weight:700;}
.lp-sanka2 h3 span.sanka2-1	{ position:relative; display:inline-block;}
.lp-sanka2 h3 span.sanka2-1 b	{ position:relative}
.lp-sanka2 h3 span.sanka2-1:before	{ position:absolute; bottom:3px; left:0; content:''; width:100%; height:0; border-bottom:10px solid #fff;}
.lp-sanka2 h3 span.sanka2-2	{ display:inline-block; font-size:130%; color:transparent; text-stroke:1px #000; -webkit-text-stroke:1px #000; text-shadow:3px 3px 0 #E98EB0;}

.lp-sanka2 h3 span.sanka2-3	{ display:inline-block; font-size:130%; color:transparent; text-stroke:1px #000; -webkit-text-stroke:1px #000; text-shadow:3px 3px 0 #66BED7;}
.lp-sanka2 .btn	{ padding:4rem 0;}
.lp-sanka2 .btn a	{ padding:2.4rem 6rem; font-size:2.0rem;}
.lp-sanka2 .image	{ position:relative; z-index:4;}
.lp-sanka2 .image img	{ max-width:380px;}
.lp-sanka2 .kouza	{ position:relative; margin:0 auto; max-width:1180px;}
.lp-sanka2 .kouza .message	{ padding:0 0 2rem; background:url(../img/kouza-message.svg) no-repeat center top / auto 69px;}
.lp-sanka2 .kouza .message p	{ padding:12px 0; text-align:center; font-size:1.6rem; font-weight:700; line-height:1.5;}
.lp-sanka2 .kouza .fal	{ 
	position:relative; width:100%;
	display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
}
.lp-sanka2 .kouza .l	{ width:50%; max-width:320px;}
.lp-sanka2 .kouza .r	{ width:50%; max-width:320px;}

.site-footer	{ padding:6rem 8%; }
.site-footer .footer-content	{}
.site-footer .address	{ margin:0 0 5rem; text-align:left;}
.site-footer .site-title	{ margin:0 0 3rem;}
.site-footer .site-title img	{ width:280px;}
.site-footer .address p	{ line-height:1.8;}
.site-footer address	{ line-height:1.4;}
.site-footer .buttons	{ margin:0 auto 5rem;}
.site-footer .buttons .btn	{ margin:0 1rem 1.6rem;}
.site-footer .btn a	{ font-size:1.8rem; color:#A1184F; border:1px solid #A1184F;}
.site-footer .btn a:before	 { border-color:#A1184F;}
.site-footer .btn a:after	 { border-bottom-color:#A1184F; border-left-color:#A1184F;}
.site-footer .copyright	{ text-align:left;}
.site-footer .copyright p	{ font-size:1.2rem; line-height:1.5; font-family:"Josefin Sans", sans-serif; color: #A1184F;}
.site-footer a	{}
.site-footer a:hover	{}


/**
/* - .loop_text
/*/
.loop_text {
	position:absolute; display:flex; align-items:center; 
	width:100vw; height:auto; background-color:transparent; overflow:hidden;
}
.loop_text div {
	flex: 0 0 auto; padding:0 0.2em; 
	font-size:55px; font-family:"Josefin Sans", sans-serif; letter-spacing:0.1em;
	white-space:nowrap; will-change:transform;
}

@media screen and ( min-width: 720px ) {
	.loop_text div { font-size: 64px;}
}
@media screen and ( min-width: 1280px ) {
	.loop_text div { font-size: 78px;}
}

.loop_text div:nth-child(odd) {
	animation: loop 50s -25s linear infinite;
	backface-visibility: hidden;
	will-change: transform;
}
.loop_text div:nth-child(even) {
	animation: loop2 50s linear infinite;
}

@keyframes loop {
	0% {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
}

@keyframes loop2 {
	0% {
		transform: translateX(0);
	}
	to {
		transform: translateX(-200%);
	}
}



/**
/* - 6.8 Video Elements
/*/







/* **************************************************************************** */
/*
/* 7.0 - clearfix
/*
/* **************************************************************************** */

.clearfix::after,
.content:after,
p:after { content:''; display:block; clear:both;}




/* **************************************************************************** */
/*
/* 12.0 - Animation Class
/*
/* **************************************************************************** */

.titleswipe.show b		{ animation:titleswipe 0.8s ease-out 0s 1 normal forwards;}
.titleswipe.show b:before	{ animation:showtitle_animation 0.6s ease-in-out 0s 1 normal forwards;}

.alphain.show		{ animation:alphain 1.0s linear 0s 1 normal forwards;}
.image_on_text.show		{ animation:image_on_text 0.5s linear 0s 1 normal forwards;}

.translatey	{ opacity:0;}
.translatey.show	{ animation:translatey 0.4s ease-in-out 0s 1 normal forwards;}
.translatel.show	{ animation:translatel 0.4s ease-in-out 0s 1 normal forwards;}
.translater.show	{ animation:translater 0.4s ease-in-out 0s 1 normal forwards;}

.rotatein.show img	{ animation:rotatein 1.6s ease-in-out 0s 1 normal none;}

.zoomin.show	{ animation:zoomin  0.6s ease-out 0s 1 normal forwards;}
.zoomout.show	{ animation:zoomout 0.6s ease-out 0s 1 normal forwards;}

.pullin-l		{ transform-origin:left center; transition:all .9s ease; transform:perspective(150px) rotateY(10deg); opacity:0;}
.pullin-l.show	{ transform:perspective(0px) rotateY(0deg); opacity:1;}
.pullin-r		{ transform-origin:right center; transition:all .9s ease; transform:perspective(150px) rotateY(-10deg); opacity:0;}
.pullin-r.show	{ transform:perspective(0px) rotateY(0deg); opacity:1;}


@keyframes titleswipe	{
	0%	{ transform:translateX(-30px);}
	100%{ transform:translateX(0);}
}
@keyframes image_on_text	{
	0%	{ color:transparent;}
	100%{ color:#fff;}
}
@keyframes alphain	{
	0%	{ opacity:0;}
	100%{ opacity:1;}
}
@keyframes translatey	{
	0%	{ transform:translateY(40px); opacity:0;}
	100%{ transform:translateY(0); opacity:1;}
}
@keyframes translatel	{
	0%	{ transform:translateX(-40px); opacity:0;}
	100%{ transform:translateX(0); opacity:1;}
}
@keyframes translater	{
	0%	{ transform:translateX(40px); opacity:0;}
	100%{ transform:translateX(0); opacity:1;}
}
@keyframes zoomin	{
	0%	{ transform:scale(0.8,0.8); opacity:0;}
	100%	{ transform:scale(1.0,1.0); opacity:1;}
}
@keyframes zoomout	{
	0%	{ transform:scale(1.2,1.2); opacity:0;}
	100%	{ transform:scale(1.0,1.0); opacity:1;}
}
@keyframes rotatein	{
	0%	{ transform:scale(1.2,1.2) rotate(0deg); opacity:0;}
	100%	{ transform:scale(1.0,1.0) rotate(0deg); opacity:1;}
}




/* **************************************************************************** */
/*
/* 13.0 - Media Queries
/*
/* **************************************************************************** */

@-ms-viewport 	{ width: device-width;}
@viewport 		{ width: device-width;}


/**
/*  720 <=                              */
@media screen and (min-width: 720px) {

	.ss		{ display:none;}
	.ll		{ display:none;}
	.mm		{ display:block;}
	.spn	{ display:none;}
	.pc		{ display:block;}

	/* **
	/* 1.0 - 
	/* -------------------------------- */

	#branding .site-title	{ padding:12vh 10%;}
	.billboard .site-catch	{ top:24vh; letter-spacing:0.1em;}
	.billboard	{ padding:35vh 0 0;}
	.billboard:before	{ background:url(../img/billboard-bg--l.jpg) no-repeat center center / cover;}
	.billboard .image	{ padding:0 5% 5vh;}
	.billboard .image:before	{ background:url(../img/billboard-overlay--l.png) no-repeat center center / 100% auto;}

	.gakkas	{ 
		display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
	}
	.gakkas .gakka	{ width:45%; max-width:380px; margin-bottom:14rem;}
	.gakkas .gakka-nursing	{ position:relative; top:5rem;}

	.lp-ao .about-mv .videos	{
		display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
	}
	.lp-ao .about-mv .video		{ width:48%; margin:0 0 3rem;}

	.lp-sanka2	{ padding:6rem 0 0;}
	.lp-sanka2 .kouza	{ padding:0 0 4rem;}
	.lp-sanka2 .kouza .fal	{ 
		position:absolute; bottom:0; z-index:1;
	}
	.lp-sanka2 .kouza .l	{ width:30%;}
	.lp-sanka2 .kouza .r	{ width:30%;}

	.site-footer .buttons	{}
	.site-footer .buttons .btn	{ margin:0 1rem 1.6rem; display:inline-block;}

}



/**
/*  1024px <=                          */
@media screen and (min-width: 1024px) {

	body,
	button,
	input,
	select,
	textarea { font-size:14px; font-size: 1.4rem;}

	.ss		{ display:none;}
	.mm		{ display:none;}
	.ll		{ display:block;}
	.spn	{ display:none;}
	.pc		{ display:block;}

	/**
	 *  - Typography 	**/
	h1	{ font-size:3rem;}
	h2	{ font-size:2.6rem;}
	h3	{ font-size:2rem;}
	h4	{ font-size:1.6rem;}
	h5	{ font-size:1.5rem;}
	h6	{ font-size:1.4rem;}

	#branding .site-title	{ padding:8vh 10%;}
	.billboard .site-catch	{ top:20vh;}
	.billboard	{ padding:25vh 0 0;}
	.billboard .image	{ padding:0 5% 8vh;}

	.lp-sanka1 .section-content {
		display:flex; flex-flow:row-reverse wrap; justify-content:space-between; align-items:flex-start;
	}
	.lp-sanka1 .section-content .content	{ width:50%;}
	.lp-sanka1 .section-content .image		{ width:50%; max-width:410px;}

	.lp-course .section-header	{ padding:10rem 0 6rem;}
	.lp-ao .about-step h4	{ text-align:left;}
	.lp-ao .about-step ol	{ 
		margin:0 auto; width:auto; max-width:1080px;
		display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
	}
	.lp-ao .about-step li	{ width:22%;}
	.lp-ao .about-step li:before	{ bottom:50%; left:auto; right:-30px; width:30px; height:0; border-top:1px solid #7DB7C8;}
	.lp-ao .about-step li:after		{ bottom:calc(50% - 4.5px); left:auto; right:-32px; border:solid transparent; border-left-color:#7DB7C8; border-width:5px 0 5px 9px;}

	.lp-sanka2 .btn	{ padding:2rem 0 4rem;}



}



/* 1280px =<                            */
@media screen and (min-width: 1280px) {

	.billboard .site-catch	{ top:20vh; font-size:2.8rem; letter-spacing:0.15em;}
	.billboard	{ padding:24vh 0 0;}
	.billboard .image	{ padding:0 4% 8vh;}

	.lp-sanka1 h3		{ font-size:4.0rem;}
	.lp-sanka1 h3 span	{ font-size:4.8rem;}
	.lp-sanka1 .btn a	{ font-size:2.0rem; padding:2.5rem 4em;}

	.gakkas .gakka .content .info	{ padding:3rem 2em;}
	.gakkas .gakka-nursing	{ top:8rem;}

	.interval	{ height:300px;}
	.interval img	{ height:300px; object-fit:cover;}
	
	.lp-ao .section-title	{ font-size:3.4rem;}
	.lp-ao .about-ao p	{ font-size:1.8rem;}
	.lp-ao .about-mv h3	{ padding:44px 0 0; font-size:2.4rem;}

	.lp-sanka2 .kouza .message	{ padding:0 0 2rem; background:url(../img/kouza-message.svg) no-repeat center top / auto 92px;}
	.lp-sanka2 .kouza .message p	{ padding:18px 0; font-size:2.1rem;}

	.site-footer .footer-content	{ 
		display:flex; flex-flow:row-reverse wrap; justify-content:space-between; align-items:flex-start;
	}
	.site-footer .buttons	{ width:60%;}
	.site-footer .address	{ width:40%;}

}