@charset "utf-8";

/*
 * lakuna-common.css
 * らくーなクン 共通スタイル
 * 統合元: default.css / common.css
 * ブランドカラー: Blue #0096EA / Yellow #FFE131 / Dark #0F163D
 */


/* ============================================================
   リセット (default.css)
   ============================================================ */
* {
	margin: 0px;
	padding: 0px;
}
body {
	-webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
address {
	font-style: normal;
}
img {
	border: none;
	vertical-align: top;
}
ul, ol {
	list-style-type: none;
}
dl dt img,
dl dd img,
ul li img,
ol li img {
	vertical-align: top;
}
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
a {
	text-decoration: none;
}

/* マージンユーティリティ */
.mb0px  { margin-bottom: 0px  !important; }
.mb5px  { margin-bottom: 5px  !important; }
.mb10px { margin-bottom: 10px !important; }
.mb15px { margin-bottom: 15px !important; }
.mb20px { margin-bottom: 20px !important; }
.mb25px { margin-bottom: 25px !important; }
.mb30px { margin-bottom: 30px !important; }
.mb35px { margin-bottom: 35px !important; }
.mb40px { margin-bottom: 40px !important; }
.mb45px { margin-bottom: 45px !important; }
.mb50px { margin-bottom: 50px !important; }

/* テキスト寄せ */
.txt-left   { text-align: left   !important; }
.txt-center { text-align: center !important; }
.txt-right  { text-align: right  !important; }

/* フォントサイズユーティリティ */
.txt-10px { font-size: 10px !important; }
.txt-12px { font-size: 12px !important; }
.txt-14px { font-size: 14px !important; }
.txt-16px { font-size: 16px !important; }
.txt-18px { font-size: 18px !important; }
.txt-20px { font-size: 20px !important; }

/* Clearfix */
.clearfix:after {
	content: ".";
	display: block;
	height: 0px;
	clear: both;
	visibility: hidden;
}
.clear { clear: both; }


/* ============================================================
   基本設定・共通レイアウト (common.css)
   ============================================================ */
.pc { display: block !important; }
.sp { display: none  !important; }

html { font-size: 10px; }

body {
    font-size: 1.6rem;
    line-height: 1;
    font-family: 'Noto Sans JP', sans-serif;
    color: #0F163D;
    background: #fff;
    padding-bottom: 4.0rem;
}
img {
    width: 100%;
    height: auto;
}
p  { font-size: 1.6rem; }
li { font-size: 1.6rem; }

/* ヘッダー */
header {
    position: fixed;
    width: 100%;
    z-index: 90;
    height: 8.0rem;
    padding-top: 1.5rem;
    padding-left: 3.0rem;
    top: 0;
    background: #fff;
    box-sizing: border-box;
}
header ul {
    position: fixed;
    top: 1.0rem;
    right: 18.0rem;
    display: flex;
}
header ul li {
    width: 15.0rem;
    margin-left: 1.0rem;
}
header ul li:first-of-type {
    width: 12.2rem;
    padding-top: 0.7rem;
}
#login {
    display: block;
    position: absolute;
    right: 11.0rem;
    top: 1.5rem;
    width: 4.2rem;
}
#logo {
    width: 25.0rem;
}
#logo img {
    width: 17.6rem;
}
#logo a span {
    color: #0F163D;
    line-height: 1;
    font-size: 1.2rem;
    display: block;
    margin-bottom: 1.0rem;
}

/* ハンバーガーメニュー */
#menu {
    position: fixed;
    width: 4.0rem;
    height: 2.8rem;
    right: 4.0rem;
    top: 2.5rem;
    z-index: 999;
}
#btn-menu {
    display: block;
    width: 4.0rem;
    height: 2.8rem;
    right: 0rem;
    top: 0rem;
    z-index: 999;
}
#btn-menu.active { background: none; }
#btn-menu .menu-trigger,
#btn-menu .menu-trigger span {
    display: inline-block;
    transition: all .5s;
    box-sizing: border-box;
}
#btn-menu .menu-trigger {
    width: 100%;
    height: 100%;
    position: relative;
}
#btn-menu .menu-trigger span {
    background: #1E2DC3;
    position: absolute;
    left: 0rem;
    height: 1px;
}
#btn-menu .menu-trigger.active span { background: #fff; }
#btn-menu .menu-trigger span:nth-of-type(1) { top: 0rem;   width: 4.0rem; }
#btn-menu .menu-trigger span:nth-of-type(2) { top: 1.4rem; width: 4.0rem; }
#btn-menu .menu-trigger span:nth-of-type(3) { top: 2.8rem; width: 4.0rem; }
#btn-menu .menu-trigger.active span:nth-of-type(1) {
    transform: translateY(1.4rem) rotate(-155deg);
    width: 4.0rem;
}
#btn-menu .menu-trigger.active span:nth-of-type(2) { opacity: 0; }
#btn-menu .menu-trigger.active span:nth-of-type(3) {
    transform: translateY(-1.4rem) rotate(155deg);
    width: 4.0rem;
}

/* グローバルナビ */
#gnavi {
    background: #0096EA;
    width: 44.0rem;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease-in-out;
    overflow-y: scroll;
    scrollbar-width: none;
}
#gnavi.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
#gmenu {
    padding-top: 8.0rem;
    padding-left: 5.0rem;
    box-sizing: border-box;
}
#gmenu ul { margin-bottom: 5.0rem; display: block; }
#gmenu ul li { position: relative; }
#gmenu ul li a {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    display: block;
    margin-bottom: 3.0rem;
    padding: 0;
    transition: 0.5s;
}
#gmenu ul li a:hover {
    opacity: 0.6;
    transition: 0.5s;
    text-decoration: underline;
}
#gmenu ul.app {
    display: flex;
    width: 34.0rem;
    margin-bottom: 0;
    justify-content: space-between;
    align-items: center;
}
#gmenu ul.app li { width: 51%; }
#gmenu ul.app li:first-of-type { width: 42%; }
#gmenu p a {
    color: #0F163D;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 2.6rem;
    text-align: center;
    display: block;
    background: #FFE131;
    border-radius: 7.0rem;
    padding: 2.0rem;
    width: 34.0rem;
    height: 7.0rem;
    box-sizing: border-box;
    border-bottom: 4px solid #FFAF50;
    transition: 0.2s;
    cursor: pointer;
}
#gmenu p a:hover { opacity: 0.8; }

/* フッター */
footer p {
    text-align: center;
    font-size: 1.4rem;
    font-family: 'Lato', sans-serif;
}