@charset "utf-8";

:root {
    --body-text: #252525;
    --service-h4: #fff;
    --footer: #ffcad5;
    --loader: #ffb1c1;
    --link-color: #5c8be2;

    /* スマホメニュー */
    --sp-nav-bg: rgba(255,255,255, .98);
    --sp-nav-text: #333;
    --sp-nav-hover: #138ef4;
    --sp-nav-active: #138ef4;

    /* PCメニュー */
    --nav-menu-bg: linear-gradient(0deg, #2caed9, #2cbcd9);
    --nav-menu-hover: #2ca0d9;
    --nav-menu-active: #2ca0d9;
    --nav-text-shadow: 0 0 2px rgba(0,0,0, .25);
    
    /* 送信ボタン*/
    --btn-send: #497bd0;
    --btn-send-hover: #5bbbb7;
    
    /* BGカラー */
    --bg-dark: ;
    --bg-darker: ;
    --bg-light: ;
    --bg-lighter: ;
    
    /* フォントサイズ */
    --normal: 400;
    --bold: 500;
    --xbold: 600;
    --xxbold: 700;
        
    /* テキストカラー */
    --white: #fff;
    --light: #f0f0f0;
    --lighter: #f8f9fa;
    --gray: #666;
    --dark-gray: #343a40;
    --light-gray: #f0f0f0;
    --black: #000;
    --dark: #222;
    --darker: #343a40;
    --green: #179d56;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* 
===========================================================
   # Body
===========================================================
*/
body{
    font-family: 'Noto Sans JP', "游ゴシック体", "YuGothic", "游ゴシック Medium", 'Yu Gothic Medium', "ヒラギノ角ゴ ProN", 'Hiragino Kaku Gothic ProN', "メイリオ", Meiryo, sans-serif;
    color: var(--body-text);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    line-height: 1.6;
    word-wrap : break-word;
    overflow-wrap : break-word;
    -webkit-font-smoothing: ; /*antialiased*/
}
p{
    line-height: 1.8;
    margin-bottom: 0;
}
p.article{
    line-height: 2.2;
}

@media (min-width: 992px) {
    body {
        font-size: 1rem;
    }
}

::-moz-selection{color: #222; background: #ffe3ee;}
::-webkit-selection{color: #222; background: #ffe3ee;}
::selection{color: #222; background: #ffe3ee;}

/* 
===========================================================
   # Style
===========================================================
*/
.font-jp{
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

/* -------------- Serif Style -------------- */
.serif{
	font-family: "游明朝", 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', "メイリオ", Meiryo, serif !important;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.05em;
}

/* -------------- Sub Title -------------- */
.small-title{
    font-size: 14px;
    color: #666;
    letter-spacing: 0.25em;
}

/* -------------- Divider -------------- */
.divider{
    width: 80px;
    height: 1px;
    background: #fe8c9a;
    margin: 7px 7px 30px 7px;
}

/* 
===========================================================
   # Heading
===========================================================
*/
/* -------------- Heading -------------- */
strong,h1,h2,h3,h4,h5,h6{font-weight: normal;}
h1{font-size: 1rem;line-height: 1rem;margin: 0 !important;}
h2{font-size: 160%;line-height: 1.6;margin-bottom: 0;}
h3{font-size: 130%;line-height: 1.6;margin-bottom: 0;}
h4{font-size: 1rem;line-height: 1.6;margin-bottom: 0;}
h5{font-size: 1rem;line-height: 1.6;margin-bottom: 0;}
h6{font-size: 1rem;line-height: 1.6;margin-bottom: 0;}

@media (min-width: 992px){
    h1 {font-size: 1rem; line-height: 1rem;}
    h2 {font-size: 200%;}
    h3 {font-size: 1.2rem;line-height: 1.6;letter-spacing: 0.04em;}
}


/* -------------- Custom Header -------------- */


/* 
===========================================================
   # Heading images
===========================================================
*/
.top-image{
    height:15vh;
    padding-left: 3%;
}
@media (min-width: 992px){
    .top-image{
        height: 200px;
        min-height: 30px;
        padding-left: 3%;
    }
}

/* -------------- Page Header -------------- */
.header-1{
    background:url(../img/header.jpg) left 50% top 80% / cover no-repeat;
}

/* -------------- Page内 Content -------------- */
.bg-1{
    background:url(../img/g-bubble.jpg) center 50% / cover no-repeat;
    text-shadow: none;
}
/* -------------- Teaser Call to Action -------------- */
.cta-1{
    background:url(../img/cta-1.jpg) left 50% top 50% / cover no-repeat;
}

/* -------------- BG Dark Mask -------------- */
.bg-alfa{
    background-size: cover;
	position: relative;
}
.bg-alfa:before{
	content: ' ';
	background-color: rgba(0,0,0, .035);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* -------------- BG Darkest Mask -------------- */
.bg-alfa-dark{
    background-size: cover;
	position: relative;
}
.bg-alfa-dark:before{
	content: ' ';
	background-color: rgba(0,0,0, .055);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* -------------- BG Light Mask -------------- */
.bg-alfa-light{
    background-size: cover;
	position: relative;
}
.bg-alfa-light:before{
	content: ' ';
	background-color: rgba(255,255,255, .25);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* -------------- BG Grandient Mask -------------- */
.bg-alfa-center{
    background-size: cover;
	position: relative;
}
.bg-alfa-center:before{
	content: ' ';
	background: linear-gradient(90deg, rgba(255,255,255, .35), rgba(255,255,255, .90) 50%, rgba(255,255,255, .35)100%);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* 
===========================================================
   # Call to Action｜Teaser
===========================================================
*/
.teaser{
	color: var(--white);
    background-attachment: scroll;
    height: 150px;
}
@media screen and (min-width: 992px){
    .teaser{
        background-attachment: fixed;
        height: 280px;
    }
    .teaser h1, .teaser h2, .teaser h3, .teaser h4, .teaser h5, .teaser h6{
        color: var(--white);
    }
}

/* 
===========================================================
   # Main
===========================================================
*/
.img-round{
    border-radius: 999px;
    border: 4px solid #f64d7a;
    border: 4px solid #ffcad5;
    box-shadow: 1px 1px 6px rgba(0,0,0, .35);
    padding: 8px;
    background: #fff;
}
/*
.img-round{
    border-radius: 999px;
    border: 14px solid #rgba(255,255,255, .95);
    box-shadow: 1px 1px 5px rgba(255,255,255 .35);
}
*/

.border-b{
    border-bottom: none;
    margin-bottom: 13px;
}
@media (min-width: 992px){
    .border-b{
        border-bottom: 1px solid #ddd;
        margin-bottom: 12px;
        padding-bottom: 5px;
    }
}

/* 
===========================================================
   # リンク｜Link
===========================================================
*/
/* -------------- Normal Link -------------- */
a:link, a:visited, a:focus{
  color: var(--link-color);
  transition: .17s;
}
a:active{
  color: var(--gray);
}
a:hover{
  color: var(--gray);
  transition: .12s;
  text-decoration: none;
}

/* -------------- Dark Link -------------- */
a.dark-link:link, a.dark-link:visited, a.dark-link:focus{
    color: var(--dark);
    transition: color .17s ease;
}
a.dark-link:active{
    color: var(--dark);
}
a.dark-link:hover{
    color: var(--darker);
    transition: color .17s ease;
    text-decoration: none;
}

/* -------------- White Link -------------- */
a.white-link:link, a.white-link:visited, a.white-link:focus{
    color: var(--white);
    transition: color .17s ease;
}
a.white-link:active{
    color: var(--white);
}
a.white-link:hover{
    color: var(--lighter);
    transition: color .17s ease;
    text-decoration: none;
}

a, img{
    user-drag: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
}

/* 
===========================================================
   # Page Section padding
===========================================================
*/
section.first-section {
    padding-top: 10px !important;
    padding-bottom: 30px !important;
    overflow: hidden;
}
section.page-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    overflow: hidden;
}

@media (min-width: 992px) {
    section.first-section {
        padding-top: 10px !important;
        padding-bottom: 40px !important;
    }
    section.page-section {
        padding-top: 40px !important;
        padding-bottom: 40px  !important;
    }
}

/* 
===========================================================
   # Utility
===========================================================
*/
/* -------------- Size & Style -------------- */
.smallest{font-size: 12px !important;}
.small{font-size: 85% !important;}
.smaller{font-size: 90% !important;}
.larger{font-size: 110% !important;}
.large{font-size: 120% !important;}
.xlarge{font-size: 150% !important;}
.xxlarge{font-size: 165% !important;}
.largest{font-size: 180% !important;}
.largest-more{font-size: 200% !important;}
.copy{color: rgba(0,0,0, .5);}
.bold{font-weight: var(--bold) !important;}
.xbold{font-weight: var(--xbold) !important;}
.xxbold{font-weight: var(--xxbold) !important;}
.pc-bold{font-weight: var(--normal) !important;}
@media screen and (min-width: 992px){
    .pc-bold{font-weight: var(--bold) !important;}
}
.normal{font-weight: var(--normal) !important;}
.capitalize{text-transform: capitalize !important;}
.lowercase{text-transform: lowercase !important;}
.ts-none{text-transform: none !important;}
.lh-16{line-height: 1.6 !important;}
.lh-1{line-height: 1 !important;}

/* -------------- Text Color -------------- */
.white{color: #fff !important;}
.light{color: #fafafa !important;}
.dark{color: #333 !important;}
.black{color: #000 !important;}
.lightgray{color: #999 !important;}
.color{ color: #e41919 !important;}
.glass{ opacity: .5;}

/* -------------- BG Color -------------- */
.bg-white{background: #fff !important;}
.bg-light{background: #f9f9f9 !important;}
.bg-gray-lighter{background: #f7ffff !important;}
.bg-gray{background: #fafafa !important;}
.bg-dark{background: #333 !important;}
.bg-black{background: #000 !important;}
.bg-dark-blue{background: #257db7 !important;}
.bg-blue{background: #2cbcd9 !important;}
.bg-lightblue{background: #fafaff !important;}
.bg-blue-lighter{background: #f3fcfe !important;} /* #f1fffd */
.transp{background: transparent !important;}

/* -------------- Text Shadow -------------- */
.text-shadow{
    text-shadow: 0 0 3px rgba(0,0,0, .7);
}
.text-shadow-white{
    text-shadow: 0 0 3px rgba(255,255,255, .6);
}
.shadow{
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .1);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .9);
}
.white-shadow{
    -webkit-box-shadow: 0px 0px 200px rgba(255, 255, 255, .2);
    box-shadow: 0px 0px 200px rgba(255, 255, 255, .2);
}

/* -------------- etc. -------------- */
.align-center{ text-align:center !important;}
.align-left{ text-align:left !important;}
.align-right{ text-align:right !important;}
.left{float:left !important;}
.right{float:right !important;}
.align-center-left{text-align: left !important;}
.align-left-center{text-align: center !important;}
.align-left-right{text-align: right !important;}
.align-right-center{text-align: center !important;}
@media screen and (min-width: 992px){
    .align-center-left{text-align: center !important;}
	.align-left-center{text-align: left !important;}
	.align-right-center{text-align: right !important;}
}
.relative{position:relative;}
.inline-block{display:inline-block;}
.hidden{display:none;}
hr.hr-light{border-top: 1px solid #eee;margin: 0;}

/*
===========================================================
	 # フッター｜Footer
===========================================================
*/
footer{
    background: var(--footer);
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0, .125);
}

.footer-logo{
    height: 39px;
    width: auto;
}
@media (min-width: 992px){
    .footer-logo{
        height: 52px;
        width: auto;
    }
}