@charset "UTF-8";

/* !Reset
---------------------------------------------------------- */
/**
 * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
 * http://cssreset.com
 * Copyright 2012 Yahoo! Inc. All rights reserved.
 * http://yuilibrary.com/license/
 */

/*
    TODO will need to remove settings on HTML since we can't namespace it.
    TODO with the prefix, should I group by selector or property for weight savings?
*/
html {
    color: #000;
    background: #FFF;
}
/*
    TODO remove settings on BODY since we can't namespace it.
*/
/*
    TODO test putting a class on HEAD.
        - Fails on FF.
*/
body,
div,
dl, dt, dd,
ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, code,
form, fieldset, legend,
input, textarea,
p,
blockquote,
th, td {
    margin:0;
    padding:0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset, img{ border: 0;}

/*
    TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal;
}

ol, ul { list-style:none;}
caption, th { text-align: left;}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before, q:after { content:'';}

abbr, acronym {
    border: 0;
    font-variant: normal;
}

/*
    to preserve line-height and selector appearance
*/
sup { vertical-align: text-top;}
sub { vertical-align: text-bottom;}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/*
    to enable resizing for IE
*/
input,
textarea,
select { *font-size: 100%;}

/*
    because legend doesn't inherit in IE
*/
legend { color: #000;}

/*
    YUI CSS Detection Stamp
*/
#yui3-css-stamp.cssreset { display: none; }


/* !Box Sizing
---------------------------------------------------------- */
* {
	-webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
	-moz-box-sizing: border-box; /* Firefox 1+ */
	box-sizing: border-box; /* Chrome, IE8+, Opera, Safari 5.1*/
}


/* !HTML5 tags display as block
---------------------------------------------------------- */
article,
aside,
canvas,
details,
figcaption,
figure,
header,
footer,
hgroup,
menu,
nav,
section,
summary { display: block;}


/* !Listing
---------------------------------------------------------- */


/* !Table Reset
---------------------------------------------------------- */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
    th, td {
        font-weight: normal;
        text-align: left;
        vertical-align: middle;
    }
	

/* !Clearfix（micro clearfix）
---------------------------------------------------------- */
.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}


/* !Anchor
---------------------------------------------------------- */
a {
    color: #222;
    text-decoration: none;
}

a:link,
a:visited {}

a:hover,
a:active {}

a:focus {}




/* !Defaults
---------------------------------------------------------- */
body {
	position: relative;
	width: 100%;
	/* letter-spacing: .03em; */
	color: #111;
	text-align: left;
	font-size: 12px;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, "Segoe UI", sans-serif;
	font-size:1.4rem;
	line-height:1.6;
	/* font-feature-settings:"palt"; */
}
body.preload {
	background:#fff url(/assets/img/common/loading.gif) no-repeat calc(50vw - 20px) calc(50vh - 20px);
	background-size:40px 40px;
	overflow:hidden;
}
.serif {
	font-family:"Frank Ruhl Libre", "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, serif;
}
.sans_serif {
	font-family:"Oswald", sans-serif;
	letter-spacing:.05em;
}
.mincho {
	font-family:"游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, serif;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.noborder  { border: none !important;}


.is-pc {
	display: block !important;
}
.is-sp {
	display: none !important;
}

.txt-center {
    text-align: center;
}

.ggmap {
    position: relative;
    padding-bottom: 60%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.change-border01::after,
.change-border01::before,
.change-border01__inner::after,
.change-border01__inner::before {
    background-color: #00a1e9;
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
}
/* 左上へ配置 */
.change-border01::after {
    height: 1px;
    left: -1px;
    top: -1px;
    width: 0px;
}
/* 右下へ配置 */
.change-border01::before {
    bottom: -1px;
    height: 1px;
    right: -1px;
    width: 0px;
}
/* 左下へ配置 */
.change-border01__inner::after {
    bottom: -1px;
    height: 0px;
    left: -1px;
    width: 1px;
}
/* 右下へ配置 */
.change-border01__inner::before {
    height: 0px;
    right: -1px;
    top: -1px;
    width: 1px;
}

/* hover */
.change-border01:hover::after,
.change-border01:hover::before {
    width: 100%;
    width: calc(100% + 1px);
}
.change-border01:hover .change-border01__inner::after,
.change-border01:hover .change-border01__inner::before {
    height: 100%;
    height: calc(100% + 1px);
}

.change-border02::after,
.change-border02::before,
.change-border02__inner::after,
.change-border02__inner::before {
    background-color: #00a1e9;
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
}
/* 左上へ配置 */
.change-border02::after {
    height: 1px;
    left: -1px;
    top: -1px;
    width: 0px;
}
/* 右下へ配置 */
.change-border02::before {
    bottom: -1px;
    height: 1px;
    right: -1px;
    width: 0px;
}
/* 左下へ配置 */
.change-border02__inner::after {
    bottom: -1px;
    height: 0px;
    left: -1px;
    width: 1px;
}
/* 右下へ配置 */
.change-border02__inner::before {
    height: 0px;
    right: -1px;
    top: -1px;
    width: 1px;
}

/* hover */
.change-border02:hover::after,
.change-border02:hover::before {
    width: 100%;
    width: calc(100% + 1px);
}
.change-border02:hover .change-border02__inner::after,
.change-border02:hover .change-border02__inner::before {
    height: 100%;
    height: calc(100% + 1px);
}

@media only screen and (max-width: 768px) {
	.is-pc {
		display: none !important;
	}
	.is-sp {
		display: block !important;
	}
}

/* !margin
---------------------------------------------------------- */
.mb10  { margin-bottom: 10px  !important;}
.mb20  { margin-bottom: 20px  !important;}
.mb30  { margin-bottom: 30px  !important;}
.mb40  { margin-bottom: 40px  !important;}
.mb50  { margin-bottom: 50px  !important;}
.mb60  { margin-bottom: 60px  !important;}
.mb70  { margin-bottom: 70px  !important;}
.mb80  { margin-bottom: 80px  !important;}
.mb90  { margin-bottom: 90px  !important;}
.mb100 { margin-bottom: 100px !important;}
.mb150 { margin-bottom: 150px !important;}

@media only screen and (max-width: 768px) {
	/* !margin
	---------------------------------------------------------- */
	.mb10  { margin-bottom: 5px  !important;}
	.mb20  { margin-bottom: 10px !important;}
	.mb30  { margin-bottom: 15px !important;}
	.mb40  { margin-bottom: 20px !important;}
	.mb50  { margin-bottom: 25px !important;}
	.mb60  { margin-bottom: 30px !important;}
	.mb70  { margin-bottom: 35px !important;}
	.mb80  { margin-bottom: 40px !important;}
	.mb90  { margin-bottom: 45px !important;}
	.mb100 { margin-bottom: 50px !important;}
	.mb150 { margin-bottom: 75px !important;}
}