/* ===============================================
   common
=============================================== */

::selection {
	background: #ffd70b;
	color: #000;
}

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

* { box-sizing: border-box; }

html {
	font-size: 62.5%;
	-webkit-font-smoothing:	antialiased;
	-moz-osx-font-smoothing: antialiased;
}

body {
	width: 100%;
	height: auto;
	margin: 0 auto;
	background: #fff;
	color: #333;
    font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	overflow:hidden;
}

li { list-style: none; }
img { display: block; margin: 0; padding: 0; width:100%; }
span { color: inherit; }
h1,h2,h3,h4,h5,h6,ol,ul,li,a,p,span,dl,dt,dd { margin: 0; padding: 0; }
a { display: block;
	text-decoration: none;
	color: inherit;
	transition: .3s ease;
	-webkit-transition: .3s ease; }
a:hover { text-decoration: none; }

a.linkbar { border-bottom: 1px solid; display: inline; }
a.linkbar:hover { border-bottom: none; }

ul { list-style: none; }

p { font-size: 1.5rem; line-height: 1.8;}

/* micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ = */
.cf::before,.cf::after{content: "";display: table}
.cf::after{clear: both}
.cf{zoom:1}

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

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

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

}





/* ===============================================
   loading
=============================================== */

#load {
	display: block;
	width: 100%;
	height: 100%;
	background: #09f;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}

#load .loadInner {
	width: 100%;
	height: 100%;
	position: relative;
}




#load img {
	width: 70px;
	height: 70px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -35px 0 0 -35px;
	animation: loading 1.0s ease infinite;
	-ms-animation: loading 1.6s ease infinite;
	-webkit-animation: loading 1.6s ease infinite;
}


@keyframes loading {
	0% { opacity: .8; transform: scale(.9); -ms-transform: scale(.9); -webkit-transform: scale(.9); }
	50% { opacity: .25; transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); }
	100% { opacity: .8; transform: scale(.9); -ms-transform: scale(.9); -webkit-transform: scale(.9); }
}

@-ms-keyframes loading {
	0% { opacity: .8; transform: scale(.9); -ms-transform: scale(.9); -webkit-transform: scale(.9); }
	50% { opacity: .25; transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); }
	100% { opacity: .8; transform: scale(.9); -ms-transform: scale(.9); -webkit-transform: scale(.9); }
}

@-webkit-keyframes loading {
	0% { opacity: .8; transform: scale(.9); -ms-transform: scale(.9); -webkit-transform: scale(.9); }
	50% { opacity: .25; transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); }
	100% { opacity: .8; transform: scale(.9); -ms-transform: scale(.9); -webkit-transform: scale(.9); }
}

#load.fin {
	opacity: 0;
}



#load {
    display: block;
    width: 100%;
    height: 100%;
    background:#fff/*#fe5*/;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

#load .spinner {
  width: 40px;
  height: 40px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -20px;
  background-color:#09f;
  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

#load.fin {
    opacity: 0;
}


/* ===============================================
   loading　02
=============================================== */

/*#load {
    display: block;
    width: 100%;
    height: 100%;
    background: #1f96ff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

#load .spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 70px;
    margin: -11px 0 0 -35px;
    text-align: center;
}

.spinner > div {
    width: 18px;
    height: 18px;
    background-color: #fff;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
    } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    }
}

#load.fin {
    opacity: 0;
}
*/






/* =================================================================
   header
   ================================================================= */

/* nav */
.inner {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.inner:after {
    content: "";
    clear: both;
    display: block;
}
 
#top-head {
    top: 0;
    position: fixed;
    width: 100%;
    padding: 0;
    margin: 100px auto 0;
    margin-top: 0;
    line-height: 1;
    z-index: 999;
    background: #fff;
}
#top-head .inner {
    position: relative;
}
#top-head .logo {
    float: left;
    font-size: 36px;
}
#global-nav {
    position: absolute;
    /* 開いてないときは画面外に配置 */
    top: -487px;
    background: #fff;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    transition: .5s ease-in-out;


/*グローバルナビ　*/

}
#global-nav ul {
    list-style: none;
    position: static;
    right: 0;
    bottom: 0;
}


/*グローバルナビ大文字　*/

#global-nav ul li {
    float: none;
    position: static;
    border-bottom: 1px solid #1f96ff;
	
	}



#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
    width: 100%;
    display: block;
    padding: 18px 0;
    font-size: 1.7rem;
    color: /*#333*/#1f96ff;
    font-weight: bold;
}


/*グローバルナビ小文字　*/

#top-head #global-nav ul li a span,
#top-head.fixed #global-nav ul li a span {
    font-size: 100%;
    position: relative;
    padding-left: 3rem;
}




/*グローバルナビアイコン　*/

/*#top-head #global-nav ul li a span:after,
#top-head.fixed #global-nav ul li a span:after {
    content: "";
    background: url(../images/common/link_icon.svg) no-repeat;
    background-size: 100%;
    background-position: center right;
    display: block;
    width: 15px;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5%;
    margin: auto;
}
#nav-toggle {
    display: block;
}*/

#top-head #global-nav ul li a span:after,
#top-head.fixed #global-nav ul li a span:after {
    content: "";
    background: url(../images/common/link_icon.svg) no-repeat;
    background-size: 100%;
    background-position: center left;
    display: block;
    width: 15px;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4%;
    margin: auto;
}
#nav-toggle {
    display: block;
}







/* Fixed */
#mobile-head {
    background: #fff;
    width: 100%;
    height: 74px;
    z-index: 900;
    position: relative;
    border-bottom: 5px solid #1f96ff;
}

#top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    padding-top: 10px;
    height: 74px;
    background: #fff;
    background: rgba(255,255,255,.7);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo,
#top-head .logo {
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 80%;
    height: 5vh;
    font-size: 2rem;
}

#top-head.fixed #global-nav ul li a {
    color: #333;
    padding: 0 20px;
}
 
/* Toggle Button */
#nav-toggle {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 54px;
    height: 74px;
    cursor: pointer;
    z-index: 901;
    background: #1f96ff;
    padding: 17px 12px 0;
    border-bottom: 5px solid #1f96ff;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 5px;
    width: 100%;
    background: #fff;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 9px;
}
#nav-toggle span:nth-child(3) {
    top: 18px;
}
#nav-toggle div:after {
    position: absolute;
    left: 0;
    bottom: -40px;
    content: 'MENU';
    display: block;
    width: 100%;
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: .35s ease-in-out;
}

/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
}
.open #nav-toggle span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
}

.open #nav-toggle div:after {
    content: 'CLOSE';
}

/* #global-nav スライドアニメーション */
.open #global-nav {
    /* #global-nav top + #mobile-head height */
    -moz-transform: translateY(556px);
    -webkit-transform: translateY(556px);
    transform: translateY(556px);
    height: 100vh;
}

/*ロゴ文字 */

#top-head .logo a span {
	font-size: 1.3rem;
	color: #0067C0;
	margin-top: 2px;
	display: block;
}

/* 多言語 */

#top-head .lang {
    display: block;
    position: absolute;
    right: 65px;
    top: 0;
    bottom: 0;
    width: 22%;
    margin: auto;
    height: 4.5vh;
    cursor: pointer;
    z-index: 902;
}

#top-head .lang ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#top-head a.toggle {
    color:/* #ffd70b;*/#1f96ff;
    text-decoration: none;
    cursor: pointer;
    -moz-transition: all, 0.25s, linear;
    -o-transition: all, 0.25s, linear;
    -webkit-transition: all, 0.25s, linear;
    transition: all, 0.25s, linear;
}
  
#top-head a.toggle:hover {
    color: #f0166e;
    text-decoration: underline;
}

#top-head .lang a {
    display: block;
}

#top-head .lang .child {
    display: none;
    background: #fff4e5;
    border: 1px solid #eaeaea;
    width: 140px;
    margin: 0 0 0 -28px;
}

#top-head .lang .child li a {
    color: #333;
    font-size: 1.2rem;
    padding: 15px 15px;
}

#top-head .lang .child > li {
    border-bottom: 1px dotted #dddddd;
}

#top-head .lang .child > li:last-child {
    border-bottom: 0;
}



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

#top-head.fixed .logo, #top-head .logo {
    height: auto;
    top: 18px;
}

#top-head.fixed .logo img, #top-head .logo img {
    width: 242px;
}

#top-head .lang {
    width: 10%;
    height: 2.5vh;
}

#top-head .lang img {
    width: 75px;
}

}



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

/* nav */

.inner:after {
    content: "";
    clear: both;
    display: block;
}
 
/* Fixed */
#mobile-head {
    z-index: 0;
    height: 180px;
    border-bottom: none;
}

#top-head {
    top: -100px;
    width: 100%;
    margin: 100px auto 0;
    border-bottom: 5px solid #1f96ff;
}
#top-head a,
#top-head {
    color: #fff;
    text-decoration: none;
}
#top-head .inner {
    position: relative;
    max-width: 1024px;
}
#top-head .logo {
    width: 33%;
    top: 40px;
    height: auto;
    transform: none;
}

#top-head.fixed .logo img, #top-head .logo img {
    width: 100%;
}

#top-head .logo a span {
    font-size: 1.7rem;
    display: block;
}
#global-nav {
    top: 120px;
   background: none;
    width: 100%;
    padding: 0;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}
#top-head #global-nav ul {
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
}


/* ------ナビボタン修正------200720-望月 */
#top-head #global-nav ul li {
    width: 33%;
    height: 60px;
    border-bottom: none;/*1px solid #09f;*/　
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
    -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
    justify-content: center; /* 横方向中央揃え */
    transition: .3s ease;
    -webkit-transition: .3s ease;
}


/* ------文字サイズ修正------200720-望月 */
#top-head #global-nav ul li a {
    font-size: 1.8rem;
    line-height: 1.2;
    font-weight: bold;
    z-index: 1;
}
 
 
 
  
/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #666;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}

/* 多言語 */
#top-head .lang {
    top: 40px;
    right: 160px;
    width: 8%;
    height: 15%;
    transform: none;
    margin: 0;
}

#top-head .lang img {
    width: 100%;
}

/* よくあるご質問 */
#top-head .faqBtn {
    position: absolute;
    top: 45px;
    right: 10px;
}

#top-head .faqBtn p a {
    font-size: 1.3rem;
    color: #333;
    font-weight: bold;
    position: relative;
    padding-left: 38px;
}

#top-head .faqBtn p a:before {
    content: " ";
    background: url(../images/common/faq_icon.svg) no-repeat 0 50%;
    background-size: 100% auto;
    width: 35px;
    height: 220%;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* hover時 */
#top-head .logo a:hover {
    opacity: .7;
}

#top-head .lang a:hover {
    opacity: .7;
}

#top-head .faqBtn p a:hover {
    color: #09f;
}

#top-head #global-nav ul li:hover {
    position: relative;
}

#top-head #global-nav ul li:hover:after {
    content: " ";
    width: 100%;
    height: 100%;
    background: rgba(232, 240, 250, .4);
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 5px solid #ffd70b;
    z-index: 0;
}

}



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

/* よくあるご質問 */
#top-head .faqBtn {
    right: 0;
}

}





/* =================================================================
   footer
   ================================================================= */

footer {
    background: #1f96ff;
}

.ftInner {
    padding: 5% 5%;
}

.ftLink {
    display: block;
    text-align: center;
}

.ftLink li {
    display: inline-block;
    vertical-align: top;
    margin-right: 14px;
    position: relative;
}

.ftLink li a {
    display: block;
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: .05em;
    transition: all .15s ease;
    -webkit-transition: all .15s ease;
    color: #333;
}

.ftLink li:after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    right: -8px;
    top: 0;
    background: #333;
}

.ftLink li:last-child:after {
    display: none;
}

.ftLogo {
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 10% 0;
    font-size: 1.2rem;
}

.ftLogo img {
    width: 25%;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

.copyright {
    text-align: center;
    font-size: 1rem;
    color: #333;
}



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

.ftInner {
    padding: 2% 5%;
}

.ftLink li a {
    font-size: 1.3rem;
}

.ftLink li a:hover {
    color: #fff;
}

.ftLogo {
    margin: 2% 0;
    font-size: 1.5rem;
}

.ftLogo img {
    width: 10%;
    margin-left: 10px;
}

.copyright {
    font-size: 1.2rem;
    margin-bottom: 0;
}

}





/* =================================================================
   wrapper
   ================================================================= */

#container {
    margin: 74px auto 70px;
}

.wrapper {
    margin: 0 auto;
    width: 95%;
    max-width: 1024px;
}



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

#container {
    width: 100%;
    margin: 185px auto 100px;
}

}