@charset"utf-8";
/*
keitan Web OpenCampus 2025  --  Primary CSS
Latest Updated : 15 May, 2025
*/

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

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


/**
 * 1.1 Import fonts
 */
 
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap');



/**
 * 1.2 Typo
 */

body,
button,
input,
select,
textarea {
	font-family: 'Roboto Slab', "游ゴシック体", "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; line-height:1.8;
}
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:2rem;}
h4	{ font-size:1.6rem;}
h5	{ font-size:1.4rem;}
h6	{ font-size:1.4rem;}

article h1,
article h2 { margin:2em 0 1.5em; text-align:center;}
article h3,
article h4,
article h5,
article h6 { margin:2em 0 1em;}

section h1:first-child, section h2:first-child, section h3:first-child, section h4:first-child, section h5:first-child, section h6:first-child,
.content h1:first-child, .content h2:first-child, .content h3:first-child, .content h4:first-child, .content h5:first-child, .content h6:first-child,
.page-content h1:first-child, .page-content h2:first-child, .page-content h3:first-child, .page-content h4:first-child, .page-content h5:first-child, .page-content h6:first-child,
.entry-content h1:first-child, .entry-content h2:first-child, .entry-content h3:first-child, .entry-content h4:first-child, .entry-content h5:first-child, .entry-content h6:first-child,
.section-content h1:first-child, .section-content h2:first-child, .section-content h3:first-child, .section-content h4:first-child, .section-content h5:first-child, .section-content h6:first-child 
{ margin-top:0 !important;}

p {}
article p { margin-bottom:1.6em; line-height:1.8;}

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 {list-style-position:outside; list-style:none;}
ul {}
ol {}

li > ul,
li > ol {
	margin: 1em 0 1em 1.3333em;
}
li > ol li:before {}

nav ul { margin:0;}
h1 + ul,
h2 + ul,
h3 + ul,
h4 + ul,
h5 + ul,
h6 + ul,
h1 + ol,
h2 + ol,
h3 + ol,
h4 + ol,
h5 + ol,
h6 + ol { margin-top:0 !important;}

ul.square,
ul.circle		{ margin: 1.6em 0 1.6em; text-align:left; line-height:1.5;}
ul.square li,
ul.circle li	{ position:relative; margin:0 0 1em; padding:0 0 0 16px;}
ul.square li:before	{ position:absolute; top:4px; left:0; content:''; width:12px; height:12px; background-color:#000; border:0;}
ul.circle li:before	{ position:absolute; top:5px; left:0; content:''; width:12px; height:12px; border:1px solid #464646; border-radius:100px;}


dl { margin-bottom: 1.6em; line-height:1.5;}
dt { font-weight: bold;}
dd { margin-bottom: 1.6em;}



/**
 * - 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.4em; text-align:left; font-weight:normal;}
th { border-width: 0 1px 1px 0; font-weight: 700;}
td { border-width: 0 1px 1px 0;}

caption { margin:0.2em 0; color:#666; caption-side:bottom;}

thead th { vertical-align:middle; font-weight:bold; background-color:#7F9FE1;}
thead td { vertical-align:middle;}

tbody th { vertical-align:middle; background-color:#CFDCF6;}
tbody td { vertical-align:middle; border-color:#ccc; border-width:1px 1px 1px 1px;}

tfoot 	 { border-top:3px double #999;}
tfoot th { vertical-align:middle; font-weight:bold; background-color:#7F9FE1;}
tfoot td { vertical-align:middle;}

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 Elements
 */

::selection {background:#FA7402; color:#000;}
::-moz-selection { background:#FA7402; color:#000;}

hr {
	background-color: transparent;
	border: 0;
	height: 1px;
	margin-bottom: 1.6em;
}
hr.none { background-color:transparent;}

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

figure 		{}
figcaption 	{}

del { opacity: 0.8;}




/**
 * - 1.6 Decoration
 */

.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 Slab', Helvetica, sans-serif;}

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




/* **************************************************************************** */
/*
/* 2.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;}



/* **************************************************************************** */
/*
/* 3.0 Links
/*
/* **************************************************************************** */

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

a:hover,
a:focus {
	color:#00BBF4;
}

nav a { text-decoration:none;}

a[href^="tel:"] {
	color:#333232; cursor:default;
}



/* **************************************************************************** */
/*
/* 4.0 Navigation
/*
/* **************************************************************************** */


/**
 * - Bread crumb navigation
 */
.breadcrumb	{ padding:2em 8%; background-color:#fff;}
.breadcrumb ul	{ text-align:left; font-size:1.1rem;}
.breadcrumb li	{ display:inline-block; margin:0 0.5rem 0 0; line-height:1;}
.breadcrumb li a	{ display:block; position:relative; padding:0 1em 0 0;}
.breadcrumb li a:after	{ position:absolute; top:3px; right:0; content:''; width:5px; height:5px; border:solid #222; border-width:1px 1px 0 0; transform:rotate(45deg);}
.breadcrumb li a:hover	{}


/**
 * - Header navigation
 */
#headnav	{ display:none;}
#headnav .menu	{ font-size:0;}
#headnav .menu li	{ display:inline-block; font-size:1.5rem;}
#headnav .menu li a	{ display:block; position:relative; padding:1.2rem 1.5rem; color:#464646;}
#headnav .menu li a small	{ display:block; margin:1rem 0 0; font-size:1.2rem; font-weight:300; font-family:'Roboto Slab', sans-serif; text-transform:uppercase;}
#headnav .menu li a:after	{ position:absolute; bottom:-10px; left:50%; content:''; margin:0 0 0 -5px; width:0; height:0; border:solid transparent; border-width:8px 5px 0 5px; transition:all 0.2s ease;}
#headnav .menu li a:hover:after	{ bottom:0; border-top-color:#FA7402;}
#headnav .menu li a:active	{ color:#FA7402;}

#headnav .menu li.current-menu-item a,
#headnav .menu li.current-menu-ancestor a { color:#FA7402;}
#headnav .menu li.current-menu-item a:after,
#headnav .menu li.current-menu-ancestor a:after	{ bottom:0; border-top-color:#FA7402;}

.home #headnav .menu li a { color:#fff;}



/**
 * - Buttons
 */
div.btn-w a	{ color:#fff; background-color:transparent; border-color:#fff;}
div.btn-w a:after	{ border-color:#fff;}
div.btn-w a:hover	{ color:#464646; background-color:#fff;}
div.btn-w a:hover:after	{ border-color:#464646;}

span.btn	{ }
span.btn a	{ position:relative; display:inline-block; padding:0 0 0 12px; text-decoration:underline;}
span.btn a:before	{ position:absolute; top:50%; left:0; content:''; margin:-4px 0 0; width:7px; height:7px; border:solid #464646; border-width:1px 1px 0 0; transform:rotate(45deg);}
span.btn a:hover	{ color:#FA7402}



/**
 * - Page top button
 */
#pagetop.fixed a { position:fixed; bottom:0; right:0; z-index:1000; width:50px; height:50px; background-color:#00BBF4; 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:#00ABF8;}
#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;}




/*
 * drawer navigation
 */

.drawer-nav		{ position:fixed; z-index:900; top:0; right:-100vw; width:75%; max-width:412px; height:100vh; color:#222; background-color:#00BBF4; overflow-y:auto; -webkit-overflow-scrolling:touch; transform:translateY(-100px); opacity:1; transition:all 0.25s;}
.drawer-overlay	{ display:none; position:fixed; z-index:1; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.2);}
.drawer-open .drawer-overlay	{ display:none;}

.drawer-hamburger		{ cursor:pointer; position:fixed; z-index:999; top:10px; right:10px; display:block; box-sizing:content-box; width:30px; padding:0 0 10px; font-size:0; -webkit-transition:all .6s cubic-bezier(.19,1,.22,1); transition:all .6s cubic-bezier(.19,1,.22,1); -webkit-transform:translateZ(0); transform:translateZ(0); border:0; outline:0; background-color:transparent;}
.drawer-hamburger:hover	{ background-color:transparent}
.drawer-hamburger-icon	{ position:relative; display:block; margin-top:14px}
.drawer-hamburger-icon,.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before	{ width:100%; height:1px; -webkit-transition:all .6s cubic-bezier(.19,1,.22,1); transition:all .6s cubic-bezier(.19,1,.22,1); background-color:#000;}
.drawer-hamburger-icon:after,.drawer-hamburger-icon:before { position:absolute; top:-10px; left:0; content:" "}
.drawer-hamburger-icon:after	{ top:10px}

.drawer-open .drawer-hamburger {}
.drawer-open .drawer-hamburger-icon	{ background-color:transparent}
.drawer-open .drawer-hamburger-icon:after,
.drawer-open .drawer-hamburger-icon:before	{ top:0;}
.drawer-open .drawer-hamburger-icon:after	{ -webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.drawer-open .drawer-hamburger-icon:before	{ -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.drawer-open .drawer-nav {
	display:block; top:0; right:0;
	transform:scale(1); opacity:1;
}

.drawernav-container	 { padding:0 0 136px;}
.drawernav-container ul	 { margin:0; padding:0; list-style:none;}
.drawer-menu	{}
.drawer-nav ul li	{ margin:0; text-align:left; font-size:1.5rem; font-weight:normal; letter-spacing:0em; border-bottom:1px solid rgba(255,255,255,.4);}
.drawer-nav ul li a	{ position:relative; display:block; padding:1.4rem 1.2em; color:#fff; text-decoration:none; background-color:transparent;}
.drawer-nav ul li a:before	{ position:absolute; top:50%; right:20px; content:''; margin:-4px 0 0; width:7px; height:7px; border:solid #fff; border-width:1px 1px 0 0; transform:rotate(45deg);}
.drawer-nav ul li a:hover	{ background-color:#5AD8FF;}
.drawer-nav ul li.outbound a:before { border:0;}
.drawer-nav ul li.outbound a { background:url(../img/icon-pc.png) no-repeat right 20px center / 15px 13px;}
.drawer-nav ul li.outbound a:hover { background-color:#5AD8FF;}

.drawer-home	{ position:relative; padding:0 50px 0 5%; text-align:left; background-color:#00BBF4;}
.drawer-home .site-logo	{ display:inline-block; padding:10px 0;}
.drawer-home .site-logo a	{ display:block;
	width:0px; height:45px;
	text-indent:200%; white-space:nowrap; overflow:hidden;
	background:url(../img/logo-header-bk.png) no-repeat 0 0 / 190px auto;
}

@media screen and (min-width: 1024px) {
/*
	.drawer,
	.hamburger-nav	{ display:none;}
*/
}




/* **************************************************************************** */
/*
/* 5.0 layout
/*
/* **************************************************************************** */

body{
	text-align:center;
}
body.fixed	{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#wrapper.blur{
	filter: blur(20px);
}

.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;}

.hide	{ display:none;}
.pc		{ display:block;}
.sp		{ display:none;}
.check { position:fixed; z-index:9999;}



/**
 * - 5.1 loading
 */

#loading{ position:fixed; z-index:9999; top:0; left:0; width:100%; height:100vh; background-color:rgba(255,255,255,.9);}
#loading span{
	display:block; position:absolute; top:50%; left:50%; width:62px; height:53px; margin:-26px 0 0 -30px; background:transparent; transition:all 0.5s ease;
}
#loading img{ transition:all 0.5s ease;}




/**
 * - 5.2 wrapper Include
 */

#wrapper 		{ margin:0 auto;}
#headerwrap 	{ position:relative; width:100%; z-index:99; background-color:#fff; transition:all 0.4s ease;}
#containerwrap 	{ }
#footerwrap 	{ background-color:#fff100;}



/**
 * - 5.3 Header Include
 */
.site-header	{ margin:0 5%; padding:0; text-align:left;}
#branding .site-title	{ 
	margin:0 !important; padding:10px 0;
}
#branding .site-title a	{ 
	display:block;
	width:190px; height:45px;
	text-indent:200%; white-space:nowrap; overflow:hidden;
	background:url(../img/logo-header-bk.png) no-repeat 0 0 / 190px auto;
}




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

#container	{ position:relative; text-align:left;}
#container:before	{ position:absolute; top:0; right:0; z-index:1; content:''; width:12%; height:330px; background:url(../img/common/container-tr.svg) no-repeat right top / 100% auto;}
.content	{}

article			{}
.page-technology article	{ padding:0;}
section			{}
.page-content section 	{}
.entry-content section 	{}
.archive-content section{}

.page-header	{}
.page-title		{}
.page-content	{}

.entry-header	{}
.entry-title	{}
.entry-content	{}

.archive-header	{}
.archive-title	{}
.archive-content{}

.section-header	{}
.section-title	{}
.section-content{}



/**
 * - 5.5 footer Include
 */

.site-footer	{ position:relative; margin:0 auto; padding:0 5%; }
.site-footer .site-title	{ margin:0 auto 3rem; max-width:334px;}
.site-footer address	{ padding:0 0 10px; text-align:left;}
.site-footer p			{ text-align:left;}
.site-footer .tel		{ margin:0 0 0.4rem;}
.site-footer .tel span	{ margin:0 2rem 0 0;}

.site-footer .btns	{ margin:0 0 2.4rem; text-align:left;}
.site-footer .btns .btn	{ display:inline-block;}
.site-footer .btns .btn:first-child	{ margin-right:10px;}
.site-footer .btns .btn a	{ padding:1.3rem 2rem; font-size:1.3rem; min-width:auto; background-color:transparent;}
.site-footer .btns .btn a:hover { background-color:#fff;}

#featurenav	{ margin:0 auto; padding:40px 5% 10px; max-width:1080px;}
#featurenav ul	{ font-size:0;}
#featurenav li	{ margin-bottom:22px;}

#footnav	{ font-size:1.4rem; text-align:left;}
#footnav ul	{}
#footnav li	{ margin:0 0 1.4rem;}
#footnav a	{ position:relative; padding:0 0 0 18px;}
#footnav a:before	{ position:absolute; top:50%; left:0; content:''; margin:-4px 0 0; width:7px; height:7px; border:solid #464646; border-width:1px 1px 0 0; transform:rotate(45deg);}
#footnav a:hover	{}

#copyright	{ margin:0; padding:2.5rem 0 2rem; color:#000;}
#copyright p	{ text-align:center; font-size:1.2rem; text-transform:uppercase;}


/**
 * - 5.6 Column Layout
 */

/* 2column
----------------------------------------------- */
.col2 { margin:0 0 2rem; text-align:center; font-size:0;}
.col2 > div { display:block; margin:0 0 1.6rem; width:auto; text-align:left; font-size:1.4rem;}
.col2 .content	{ padding:0 4%;}


/* 3column
----------------------------------------------- */
.col3 { text-align:center; font-size:0;}
.col3 > div { display:block;  text-align:left; font-size:1.4rem;}
.col3 .content	{ padding:0 4%;}





/* **************************************************************************** */
/*
/* 6.0 - clearfix
/*
/* **************************************************************************** */

.cf::after,
.content::after	{ content: ""; display: block; clear: both;}


.videowrap	{ margin:0 auto; padding:2rem 5%; max-width:748px; background-color:#fff100; border-radius:10px;}
.video {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.video iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}


.home-billboard	{ position:relative; padding:0 5% 5rem; background:#00BBF4 url(../img/home-billboard-bg.png) no-repeat center center / auto 329px;}
.home-billboard .image	{ padding:5vh 5%; text-align:center;}
.home-billboard .image img	{ width:auto; max-width:100%; max-height:450px;}
.home-billboard p	{ margin:0 auto; max-width:460px; text-align:left; font-size:1.6rem; font-weight:bold; line-height:1.8;}


.step-start	{ position:relative; margin:0 0 8rem; padding:1px 0 0;}
.step-start .section-content	{ position:relative; padding:0rem 5% 0;}
.step-start	.section-content:before	{ position:absolute; bottom:-4.5rem; left:calc(50% - 2px); content:''; width:0; height:5rem; border-left: 4px solid #FFF100; animation:aaa 2s ease 1.0s infinite;}
.step-start	.section-content:after	{ position:absolute; bottom:-5rem; left:calc(50% - 8px); content:''; width:0; height:0; border:solid transparent; border-width:20px 8px 0 8px; border-top-color:#FFF100;}
.step-start .section-title { margin:0 auto 2rem; padding:1.5rem 0; max-width:420px; text-align:center; font-size:2.6rem; line-height:1.2; font-weight:bold; color:#00BBF4; border:4px solid #FFF100; border-radius:50px;}
.step-start p	{ margin:0 auto 4rem; text-align:center;}
.step-start .touroku	{ margin:0 auto 2.4rem; text-align:center; font-size:2.7rem; font-weight:bold;}
.step-start .touroku b	{ margin:0 0.4rem; font-size:4rem;}
.step-start .present	{ position:relative; margin:-1rem auto 1rem; width:320px; height:200px; font-size:0; background:url(../img/step-start-present.png) no-repeat 0 0 / 320px auto;}
.step-start .btn-entry		{ position:relative; z-index:2; text-align:center; font-size:1.8rem;}
.step-start .btn-entry a	{ 
	display:inline-block; padding:2.5rem 5rem 2.5rem; font-size:2.8rem; font-weight:bold; color:#000; background:#FFF100 url(../img/icon-outbound-wh.png) no-repeat center 88% / 14px auto; border-radius:100px;
	animation: btn-entry 2s ease 0s infinite;
}
.step-start .btn-entry a small	{ display:inline-block; margin:0.5rem 0; font-size:1.4rem;}
.step-start .btn-entry a:hover { padding:2.5rem 6rem 2.5rem;}
.step-start .start { position:relative; top:-1.6rem; font-size:2.8rem; line-height:1.2; font-weight: bold; text-transform:uppercase;}
.step-start:before	{ 
	position:absolute; top:0; left:calc(50% - 2px); content:''; width:0; height:50px; border-left:4px solid #FFF100;
	animation: start 2s ease 0s infinite;
}
@keyframes aaa {
	0%	{ bottom:0rem; height:0;}
	50%	{ bottom:-4.5rem; height:50px;}
   100%	{ bottom:-4.5rem; height:0px;}
}
@keyframes start {
	0%	{ top: 0; height:0;}
	50%	{ top: 0; height:200px;}
   100%	{ top:200px; height:0;}
}
@keyframes btn-entry {
	0%	{ transform:scale(1);}
	50%	{ transform:scale(1.1);}
   100%	{ transform:scale(1);}
}

.step-start .mt		{ position:absolute; top:110%; left: 0; width:45%; max-width:467px;}
.step-start .mt img	{ max-width:260px;}
.step-start .pen	{ position:absolute; top:100%; right:2%; width:45%; text-align:center;}
.step-start .pen img{ max-width:200px;}

.steps	{ position:relative; margin:0 0 12rem;}
.steps .section-title	{ position:relative; margin-bottom:2.4rem;}
.steps .section-content	{ position:relative; margin:0 3%; padding:4rem 3%; max-width:922px; background-color:#00BBF4; border-radius:12px;}
.step	{ margin:-74px auto 24px; padding:1.5rem 0; max-width:300px; text-align:center; font-size:2.6rem; line-height:1.2; font-weight:bold; text-transform:uppercase; color:#ffe100; background-color:#fff; border:4px solid #fff100; border-radius:50px;}

ul.videos	{ margin:0 10%;}
ul.videos li	{ position:relative; margin:0 auto 3rem; max-width:300px;}
ul.videos li a{ position:relative; display:block; overflow:hidden;}
ul.videos li a:before{ position:absolute; top:calc(50% - 23px); left:calc(50% - 23px); content:''; width:46px; height:46px; background-color:#FF0015; border-radius:100px; transition:all 0.5s ease;}
ul.videos li a:after { position:absolute; top:calc(50% - 5px); left:calc(50% - 6px); content:''; width:0; height:0; border:solid transparent; border-width:6px 0 6px 12px; border-left-color:#fff;}


.step01	{ position:relative;}
.step01 .section-title	{ height:120px; font-size:0; background:url(../img/step01-title.png) no-repeat center center / auto 120px;}
.step01:before	{ position:absolute; bottom:-9rem; left:calc(50% - 2px); content:''; width:0; height:9rem; border-left: 4px solid #fff100;}
.step01:after	{ position:absolute; bottom:-9rem; left:calc(50% - 8px); content:''; width:0; height:0; border:solid transparent; border-width:20px 8px 0 8px; border-top-color:#fff100;}


.step02	{ position:relative;}
.step02:before	{ position:absolute; bottom:-9rem; left:calc(50% - 2px); content:''; width:0; height:9rem; border-left: 4px solid #00BBF4;}
.step02:after	{ position:absolute; bottom:-9rem; left:calc(50% - 8px); content:''; width:0; height:0; border:solid transparent; border-width:20px 8px 0 8px; border-top-color:#00BBF4;}
.step02 .section-title	{ height:150px; font-size:0; background:url(../img/step02-title.png) no-repeat center center / auto 150px;}
.step02	.midokoro-title	{ position:relative; margin:4rem 0 1rem;}
.step02	.midokoro-title:before	{ position:absolute; top:50%; left:-5%; content:''; width:110%; height:0; border-top:4px solid #fff;}
.step02	.midokoro-title span { position:relative; display:inline-block; padding:0 0.5em; line-height:1.25; background-color:#00BBF4;}
.step02	.midokoro		{ position:relative;}
.step02	.midokoro h4 	{ margin:0 auto; max-width:260px;}
.step02	.midokoro > div:nth-child(1) { position:relative; margin:0 auto; max-width:566px;}
.step02	.midokoro ul	{ display:inline-block; margin:0 auto; padding:2rem 0 3rem; text-align:left;}
.step02	.midokoro li	{ position:relative; margin:0 0 1em; padding:0 0 0 20px; font-size:1.6rem; font-weight:bold; color:#00B8EE;}
.step02	.midokoro li:before	{ position:absolute; top:1px; left:0; content:''; width:14px; height:14px; background-color:#00B8EE; border-radius:20px;}
.step02	.midokoro li a	{ position:relative; color:#00B8EE;}
.step02	.midokoro li a:before	{ position:absolute; top:1px; right:-24px; content:''; width:20px; height:16px; background:url(../img/icon-balloon.svg) no-repeat center center / 18px auto; transition:all 0.2s ease;}
.step02	.midokoro .toujou	{ position:absolute; top:105%; left:calc(50% - 35%); width:33%; max-width:150px;}
.step02	.midokoro .penguin	{ margin:0; text-align:center;}
.step02	.midokoro .penguin img	{ width:60%; max-width:320px;}
.midokorobox .label	{ display:inline-block; margin:0 0 4px; padding:0.4rem 1rem; font-size:1.4rem; font-weight:bold; line-height:1.2; color:#00B8EE; background-color:#FFF100; border-radius:4px;}
.midokorobox h3 { margin:0 0 1em; padding:1.0rem 1rem; line-height:1.4; color:#00B8EE; border:2px solid #00B8EE; border-radius:4px;}
.midokorobox p { text-indent:1em; line-height:1.8; color:#00B8EE;}
.midokorobox .image { margin:0 0 1rem; text-align:center;}
.midokorobox .image img	{ max-width:150px;}
.step02 ul.videos p	{ position:relative; margin:5px 0 0; padding:5px 0; font-size:1.3rem; color:#fff;}
.step02 ul.videos p:before	{ position:absolute; top:0; left: 0; content:''; width:5px; height:100%; border:solid #fff; border-width:1px 0 1px 1px;}
.step02 ul.videos p:after	{ position:absolute; top:0; right:0; content:''; width:5px; height:100%; border:solid #fff; border-width:1px 1px 1px 0;}

.step03	{ position:relative;}
.step03 .section-title	{ height:120px; font-size:0; background:url(../img/step03-title.png) no-repeat center center / auto 120px;}
.step03	.section-content:before	{ position:absolute; bottom:-9rem; left:calc(50% - 2px); content:''; width:0; height:9rem; border-left: 4px solid #00BBF4;}
.step03	.section-content:after	{ position:absolute; bottom:-9rem; left:calc(50% - 8px); content:''; width:0; height:0; border:solid transparent; border-width:20px 8px 0 8px; border-top-color:#00BBF4;}
.step03 h4	{ margin:0; font-size:1.8rem;}
.step03 ul	{ margin:0 10%;}
.step03 li	{ position:relative; margin:0 auto 3rem; max-width:300px;}
.step03 li a{ position:relative; display:block; overflow:hidden;}
.step03 li a:before{ position:absolute; top:calc(50% - 23px); left:calc(50% - 23px); content:''; width:46px; height:46px; background-color:#FF0015; border-radius:100px; transition:all 0.5s ease;}
.step03 li a:after { position:absolute; top:calc(50% - 5px); left:calc(50% - 6px); content:''; width:0; height:0; border:solid transparent; border-width:6px 0 6px 12px; border-left-color:#fff;}
.step03	.section-content:before	{ position:absolute; bottom:-9rem; left:calc(50% - 2px); content:''; width:0; height:9rem; border-left: 4px solid #fff100;}
.step03	.section-content:after	{ position:absolute; bottom:-9.5rem; left:calc(50% - 8px); content:''; width:0; height:0; border:solid transparent; border-width:20px 8px 0 8px; border-top-color:#fff100;}
.step03	.balloon	{ position:relative;}
.step03	.balloon1	{ position:relative; top:0; width:40%; text-align:left;}
.step03	.balloon1 img	{ max-width:200px; width:100%;}
.step03	.balloon2	{ position:absolute; top:0; right:0; width:40%;}
.step03	.balloon2 img	{ max-width:200px; width:100%;}

.step04	{ position:relative;}
.step04 .section-title	{ height:120px; font-size:0; background:url(../img/step04-title.png) no-repeat center center / auto 120px;}
.step04			{ position:relative;}
.step04:before	{ position:absolute; top:0; left:50%; z-index:-1; content:''; width:50%; height:calc(100% + 12rem); background-color:#C7E8FA;}
.step04 .section-content	{ position:relative; margin:0 auto; padding:4rem 10% 2rem; max-width:922px; background-color:transparent; border-radius:0;}
.step04	.section-content:before	{ position:absolute; bottom:-9rem; left:calc(50% - 2px); content:''; width:0; height:9rem; border-left: 4px solid #fff100;}
.step04	.section-content:after	{ position:absolute; bottom:-9.5rem; left:calc(50% - 8px); content:''; width:0; height:0; border:solid transparent; border-width:20px 8px 0 8px; border-top-color:#fff100;}
.step04 h3	{ margin:0 0 1.8rem;}
.step04 h4	{ margin:0 0 .8rem; font-size:1.8rem; line-height:1.25;}
.step04 .col2{ margin:0; padding:30vw 0 0; background:url(../img/step04-bg.png) no-repeat center top / 70% auto;}
.step04 .course	{ margin:0 0 4rem;}
.step04 .course li	{ position:relative; margin:0 0 1em; padding:0 0 0 20px; font-size:1.8rem;}
.step04 .course li:before	{ position:absolute; top:1px; left:0; content:''; width:16px; height:16px; background-color:#ccc; border-radius:20px;}
.step04 .course li:nth-child(1):before	{ background-color:#8EC339;}
.step04 .course li:nth-child(2):before	{ background-color:#497DBF;}
.step04 .course li:nth-child(3):before	{ background-color:#28AD52;}
.step04 .course li:nth-child(4):before	{ background-color:#00ACC1;}
.step04 .course li:nth-child(5):before	{ background-color:#9D61A4;}
.step04 .course li:nth-child(6):before	{ background-color:#a49560;}
.step04 .course li:nth-child(7):before	{ background-color:#60a471;}
.step04 h4	{ position:relative; padding:0 0 0 20px; text-align:left; font-size:1.8rem;}
.step04 h4:before	{ position:absolute; top:3px; left:0; content:''; width:16px; height:16px; background-color:#ccc; border-radius:20px;}
.step04 h4.unit-shushoku:before	{ background-color:#EA6353;}
.step04 h4.unit-hennyu:before	{ background-color:#5B97D1;}
.step04 .unit	{}
.step04 .unit .content { margin:0; padding:0; }
.step04 .unit ul	{ margin:0 0 1em; text-align:left;}
.step04 .unit li	{ margin:0 0 .5em;}
.step04 .unit li:before	{ content:'・';}

.step05	{ position:relative;}
.step05 .section-title	{ height:120px; font-size:0; background:url(../img/step05-title.png) no-repeat center center / auto 120px;}
.step05 .section-content	{ padding:4rem 5%; background-color:#fff; border:4px solid #fff100; border-radius:12px;}
.step05 h4	{ margin:0; font-size:1.8rem;}
.step05 ul	{ margin:0 10%;}
.step05 li	{ position:relative; margin:0 auto 3rem; max-width:300px;}
.step05 li a{ position:relative; display:block; overflow:hidden;}
.step05 li a:before{ position:absolute; top:calc(50% - 23px); left:calc(50% - 23px); content:''; width:46px; height:46px; background-color:#FF0015; border-radius:100px; transition:all 0.5s ease;}
.step05 li a:after { position:absolute; top:calc(50% - 5px); left:calc(50% - 6px); content:''; width:0; height:0; border:solid transparent; border-width:6px 0 6px 12px; border-left-color:#fff;}
.step05	.section-content:before	{ position:absolute; bottom:-9rem; left:calc(50% - 2px); content:''; width:0; height:9rem; border-left: 4px solid #fff100;}
.step05	.section-content:after	{ position:absolute; bottom:-9.5rem; left:calc(50% - 8px); content:''; width:0; height:0; border:solid transparent; border-width:20px 8px 0 8px; border-top-color:#fff100;}


.step06	{ position:relative; background-color:#00bbf4;}
.step06 .section-title	{ height:120px; font-size:0; background:url(../img/step06-title.png) no-repeat center center / auto 120px;}
.step06 .h4	{ margin:0; font-size:1.8rem;}
.step06 ul	{ margin:4rem 0 0; font-size:0;}
.step06 li	{ position:relative; display:inline-block; vertical-align:top; margin:0 auto 3rem; width:48%; max-width:300px;}
.step06 li:nth-child(odd)	{ margin-right:4%;}
.step06 a 	{ display:block;}
.step06 a p	{ margin:0.5rem 0; padding:1rem 0; font-size:1.2rem; color:#00BBF4; background-color:#fff; border-radius:50px; transition:all 0.2s ease;}
.step06 a p span	{ display:inline-block; padding:0 20px 0 0; background:url(../img/icon-outbound.png) no-repeat right center / 14px auto;}
.step06 a:hover p 	{ background-color:#fff100;}
.step06 a:hover p span 	{ background-image:url(../img/icon-outbound.png);}
.step06	.section-content:before	{ position:absolute; bottom:-12rem; left:calc(50% - 2px); content:''; width:0; height:12rem; border-left: 4px solid #00BBF4;}
.step06	.section-content:after	{ position:absolute; bottom:-12.5rem; left:calc(50% - 8px); content:''; width:0; height:0; border:solid transparent; border-width:20px 8px 0 8px; border-top-color:#00BBF4;}


.more	{ padding:5rem 0 4rem; color:#000;}
.more .section-title	{ margin:0 auto 2.4rem; height:30px; font-size:0; background:url(../img/more-title.png) no-repeat center center / auto 30px;}
.more .btn-contact	{ margin:0 auto 2.4rem;}
.more .btn-contact a	{ position:relative; display:inline-block; margin:0 5px 5px; padding:2.5rem 4rem; min-width:290px; font-weight:bold; color:#00BBF4; background-color:#fff; border-radius:100px;}
.more .btn-contact a span	{ display:inline-block; padding:0 20px 0 0; background:url(../img/icon-outbound.png) no-repeat right center / 14px auto;}
.more .btn-contact a:hover { transform:scale(1.05);}
.more .tel,
.more .mail	{ display:inline-block; margin:0.4rem;}
.more a { color:#000;}
.more a:hover	{ text-decoration:underline;}


.site-footer	{ padding:4rem 8% 0; border-top:1px solid #fff;}
.site-footer .content	{}
.site-footer .site-title	{ 
	display:inline-block;
	width:200px; height:48px;
	text-indent:200%; white-space:nowrap; overflow:hidden;
	background:url(../img/logo-bk.png) no-repeat 0 0 / 200px auto;
}
.site-footer nav	{}
.site-footer nav a	{ display:inline-block; color:#000;}
.site-footer nav a:hover	{ margin-left:10px; letter-spacing:0;}
.site-footer nav a.outbound	{ padding:0 0 0 20px; background:url(../img/icon-pc.png) no-repeat left center / 15px 13px;}
.site-footer nav ul	{}
.site-footer nav li	{ margin:0 0 18px; text-align:left; font-size:1.5rem; line-height:1.2;}
.site-footer nav .sns li	{}
.site-footer nav .sns li a	{ padding:0 0 0 20px; background-repeat:no-repeat; background-position:left center; background-size:17px;}
.site-footer nav .sns li.fb a	{ background-image:url(../img/icon-fb.png);}
.site-footer nav .sns li.tw a	{ background-image:url(../img/icon-tw.png);}
.site-footer nav .sns li.xs a	{ background-image:url(../img/icon-xs.png);}
.site-footer nav .sns li.yt a	{ background-image:url(../img/icon-yt.png);}
.site-footer nav .sns li.ln a	{ background-image:url(../img/icon-ln.png);}
.site-footer nav .sns li.ig a	{ background-image:url(../img/icon-ig.png);}




/* **************************************************************************** */
/*
/* 14.0 - Media Queries
/*
/* **************************************************************************** */

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


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

	.pc { display:block;}
	.spn{ display:none;}

	/** - header  **/
	.home-billboard	{ position:relative; padding:0 5% 5rem; background: url(../img/home-billboard-bg.png) no-repeat right 5% center / auto 329px, url(../img/home-billboard-bg.png) no-repeat left 5% center / auto 329px, #00BBF4;}

	/** - footer  **/
	.site-footer .site-title	{ 
		width:299px; height:74px;
		background-size:299px auto;
	}

	.step-start .mt		{ top:98%; left: 0; width:35%;}
	.step-start .mt img	{ max-width:467px;}
	.step-start .pen	{ top:80%; right:2%; width:35%;}
	.step-start .pen img{ max-width:280px;}
	.step-start .present	{ position:relative; left:90px; margin:-1rem auto -4rem; width:480px; height:300px; font-size:0; background:url(../img/step-start-present.png) no-repeat 0 0 / 480px auto;}
@keyframes start {
	0%	{ top: 0; height:0;}
	50%	{ top: 0; height:300px;}
   100%	{ top:20px; height:0;}
}

	.step	{ margin:-74px auto 24px; padding:1.5rem 0; max-width:420px;}

	.step01 .section-title	{ height:160px; background-size:auto 160px;}
	.step02 .section-title	{ height:200px; background-size:auto 200px;}
	.step03 .section-title	{ height:160px; background-size:auto 160px;}
	.step04 .section-title	{ height:160px; background-size:auto 160px;}
	.step05 .section-title	{ height:160px; background-size:auto 160px;}
	.step06 .section-title	{ height:200px; background-size:auto 200px;}
	.more .section-title	{ height:40px ; background-size:auto 39px;}

	.step01 .section-content:before	{ 
		position:absolute; top:-20px; left:-20px; content:''; width:136px; height:180px; background:url(../img/step1-mt.png) no-repeat left top / 136px auto;
		animation: masking 2s ease 0s infinite;
	}
	.step02 .section-content:before	{ 
		position:absolute; top:-20px;right:-5px; content:''; width:136px; height:268px; background:url(../img/step2-mt.png) no-repeat left top / 136px auto;
		animation: masking 2s ease 0s infinite;
	}
	.step02	.midokoro > div:nth-child(1) { padding:0; background-size:466px auto;}
	.step02	.midokoro > div h4	{ position:relative; top:-20px;}
	.step02	.midokoro li { font-size:1.8rem;}
	.step02	.midokoro .toujou	{ top:110%; left:calc(50% - 250px); width:200px;}
	.step02	.midokoro .penguin	{ padding:0; text-align:center;}
	.step02	.midokoro .penguin img	{ width:50%; max-width:303px;}
	.step04 .section-content	{ position:relative; margin:0 auto; padding:4rem 3% 2rem;}
	.step04 .col2	{ padding:0; background:url(../img/step04-bg.png) no-repeat center center / 634px auto;}
	.step04 .col2 > div { display:inline-block; vertical-align:top; width:50%;}
	.step04 .course	{ margin:0; padding:6rem 0 0;}
	.step04 .course li	{ margin:0 0 2.5rem;}
	.step04 .unit 			{ text-align:right;}
	.step04 .unit .content 	{ display: inline-block;}

	.step03 li a:hover:before{ transform:scale(10); opacity:0.5;}
	.step05 li a:hover:before{ transform:scale(10); opacity:0.5;}
	.step03	.balloon	{ position:absolute; top:100px; z-index:1; margin:0 auto; width:94%;}
	.step03	.balloon1	{ width:20%;}
	.step03	.balloon2	{ width:20%;}


	.step06	{ margin-bottom:180px;}
	.step06 a p	{ font-size:1.5rem;}
	.step06	.section-content:before	{ position:absolute; bottom:-18rem; left:calc(50% - 2px); content:''; width:0; height:18rem; border-left: 4px solid #00BBF4;}
	.step06	.section-content:after	{ position:absolute; bottom:-18.5rem; left:calc(50% - 8px); content:''; width:0; height:0; border:solid transparent; border-width:20px 8px 0 8px; border-top-color:#00BBF4;}

	.step06 li .image{ position:relative; overflow:hidden;}
	.step06 li .image:before{ position:absolute; top:calc(50% - 23px); left:calc(50% - 23px); content:''; width:46px; height:46px; background-color:transparent; border-radius:100px; transition:all 0.5s ease;}
	.step06 li a:hover .image:before{ transform:scale(10); background-color:rgba(255,241,0,.5);}

	.more .btn-contact a	{ padding:2.5rem 4rem; min-width:210px;}

@keyframes masking {
	0%	{ transform:rotate(-6deg); }
	50%	{ transform:rotate( 6deg); }
   100%	{ transform:rotate(-6deg); }
}


	/**  3 column  **/
	.col3 { text-align:center; width:auto; font-size:0;}
	.col3 > div { display:inline-block; vertical-align:top; width:33.3333%; width:calc(100%/3); text-align:left; font-size:1.3rem;}
	

}



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

	body,
	button,
	input,
	select,
	textarea { font-size: 1.5rem;}

	/**
	 *  - Typography 	**/
	h1	{ font-size:3rem;}
	h2	{ font-size:2.6rem;}
	h3	{ font-size:2.4rem;}
	h4	{ font-size:1.6rem;}
	h5	{ font-size:1.5rem;}
	h6	{ font-size:1.4rem;}
	table td { padding:0.4em 1em;}


	/**
	 *  - header 		**/


	/**
	 *  - footer 		**/
	#copyright	{ padding:2.5rem 2% 2rem; text-align:right; font-size:1.2rem;}


	/**
	 *  - container 	**/

	/* #container > article
	 */
	.steps .section-content	{ position:relative; margin:0 auto;}

	.step-start .mt		{ top:80%;}
	.step-start .pen	{ top:85%; right:2%; width:35%;}

	.step01 .section-content:before	{ width:176px; background-size:176px auto;}
	.step02 .section-content:before	{ width:219px; background-size:219px auto;}

	.step02 .section-content:before	{ right:-20px;}
	.step02	.midokoro-title	{ font-size:3.0rem;}
	.step02	.midokoro { padding:40px 0 20px; text-align:center;}
	.step02	.midokoro > div h4	{ position:relative; top:-50px;}
	.step02	.midokoro .toujou	{ top:50px; left:50px; width:120px;}
	.step02	.midokoro ul	{ padding:0 0 2rem;}
	.step02	.midokoro li { margin:0 0 1.5em;}
	.step02	.midokoro li a:hover:before	{ top:0px; right:-28px; width:24px; height:20px; background:url(../img/icon-balloon.svg) no-repeat center center / 24px auto;}
	.step02	.midokoro .penguin {}
	.step02	.midokoro .penguin img {}

	.step04 .section-content{ padding:4rem 0 0rem;}

	.step03	.balloon	{ top:100px; left:10%; width:80%;}
	.step03 ul { margin:0; text-align:center;}
	.step03 li { display:inline-block; margin:0 1% 3rem; vertical-align:top; width:31%; }
	.step05 ul { margin:0; text-align:center;}
	.step05 li { display:inline-block; margin:0 1% 3rem; vertical-align:top; width:31%; }
	
	.step06 .section-content	{ padding:4rem 0;}
	.step06 li	{ margin:0 1.5% 3rem; width:22%;}
	.step06 li:nth-child(odd)	{ margin-right:1%;}

	ul.videos { margin:0; text-align:center;}
	ul.videos li { display:inline-block; margin:0 1% 3rem; vertical-align:top; width:31%; }

	.site-footer .content	{ margin: 0 auto; max-width:922px;}
	.site-footer header	{ display:inline-block; vertical-align:top; width:49%; text-align:left;}
	.site-footer nav	{ display:inline-block; vertical-align:top; width:49%;}
	.site-footer nav ul	{ display:inline-block; vertical-align:top; width:49%;}

	/**
	 *  - column 		**/
	/**  2 column		**/
	.col2 { text-align:center; font-size:0;}
	.col2 > div { display:inline-block; vertical-align:top; width:50%; text-align:left; font-size:1.4rem;}


	/**  3 column  **/
	.col3 { text-align:center; width:auto; font-size:0;}
	.col3 > div { display:inline-block; vertical-align:top; width:33.3333%; width:calc(100%/3); text-align:left; font-size:1.3rem;}
	

}



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


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

	.step-start .present	{ left:45%; margin:-1rem 0 0;}
	.step-start .present	{ left:8%; margin:-1rem auto -4rem; width:585px; height:340px; font-size:0; background-size:585px auto;}


	#copyright	{ padding:2.5rem 2% 2rem; font-size:1.4rem;}


}