@charset "utf-8";

*{
	margin:0;
	padding:0;
	box-sizing: border-box;	
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, section, article, aside, hgroup, header, footer, nav, dialog, figure, menu, video, audio, mark, time, canvas, details {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align:baseline;
	background: transparent;
}

article, aside, canvas, details, figcaption, figure, header,
footer, hgroup, menu, nav, section, summary {
display: block;
}

@media only screen and 
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
  .hoge {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

ol, ul {
	list-style: none;
}

address,caption,cite,code,dfn,em,strong,var {
	font-style: 600;
}

caption,th {
	text-align: left;
	font-weight:600;
}

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

object,
embed {
	vertical-align: top;
}

textarea,th {
	font-size: 100%;
	font-weight: normal;
}

img,abbr,acronym,fieldset {
	border: 0;
}

img{
	max-width: 100%;
	height: auto;
	line-height: 1;
}

table {
	font-size:100%;
	border-collapse: collapse;
	border-spacing: 0;
	vertical-align:top;
}

h1,h2,h3,h4,h5{
	font-weight: 300;
}



/* For modern browsers */
.cf:before,
.cf:after,
.contact_det li:before,
.contact_det li:after,
.contact_det-btn li:before,
.contact_det-btn li:after {
    content:"";
    display:table;
}
 
.cf:after,
.contact_det li:after,
.contact_det-btn li:after {
    clear:both;
}

a:link , a:active , a:visited {
	color: inherit;
	text-decoration:none;
}

/*--- リンクカラー */
a:hover {
	text-decoration: none;
}

.clm-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}



/* -----------------------------------------------------------

	ページ共通設定
	
----------------------------------------------------------- */


body {
	width: 100%;
	opacity: 0;
	transition: opacity 1s ease;
}


html.wf-active body.load-on,
html.loading-delay body.load-on {
    opacity: 1;
}

body.fadeout{
	opacity: 0!important;
}

@font-face {
  font-family: 'kokoro';
  src: url('Kokoro.otf') format('opentype');
}


::selection {
    background-color:#efeeeb;
    color:#447065;
}

::-moz-selection {
    background-color:#efeeeb;
    color:#447065;
}

.bgg a::selection,
.bgg p::selection {
    background-color:#447065;
    color:#efeeeb;
}

.bgg a::-moz-selection,
.bgg p::-moz-selection {
    background-color:#447065;
    color:#efeeeb;
}

.fadein {
    opacity: 0;
    transition: opacity 2s ease;
}

.fadein.view {
    opacity: 1;
}

.fadeup {
    opacity: 0;
    transform: translateY(2rem);
    transition: 2s ease;
    transition-property: opacity , transform;
}

.fadeup.view {
    opacity: 1;
    transform: translateY(0);
}

.blfadeup{
    filter: blur(10px);
    transform: scale(1.02) translateY(2rem);
    opacity: 0;	
    transition: 2s ease;
    transition-property: filter , opacity , transform;
}

.blfadeup.view{
    filter: blur(0);
    transform: scale(1) translateY(0);
    opacity: 1;	
}

.thover a{
	transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1);	
}

.thover a:hover{
	opacity: .5;
}

.ihover img{
	transition: opacity 1s ease-out;	
}

.ihover:hover img{
	opacity: .5;
}


.grecaptcha-badge{
	opacity: 0;
}


/*
loading
--------------------
*/

#loading{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	pointer-events: none;
}

#loading::before{
	content: "";
	display: block;
	width: 100%;
	height: 150%;
	position: fixed;
	top: 0;
	left: 0;
	background: url(../../img/common/bg.png);
	transition: 1.6s ease 2.46s;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	transition: 2s ease-out 3s;
	z-index: -1;
}


#loading::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: url(../../img/common/bg.png);
	transition: 1.6s ease 2.46s;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	transform: translateY(50%);
	transition: 2s ease-out 3s;
	z-index: -1;
}


.load-on #loading::before{
	transform: translateY(-100%);
}

.load-on #loading::after{
	transform: translateY(-100%);
}

#loading .loading-logo{
	width: 24%;
	max-width: 240px;
	display: block;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
	background-size: cover;
	transition: opacity 1s ease 2.6s;
}

@media (max-width: 880px) {

#loading .loading-logo{
	width: 33%;
}

}

.load-on #loading .loading-logo{
	opacity: 0;
}

#loading .loading-logo svg{
	width: 100%;
	height: auto;
}

#loading .loading-logo .loading-text {
    width: 77%;
    margin: 23% auto 0;
    opacity: 0;
    transition: .2s ease 1.9s;
}

.load-on #loading .loading-logo .loading-text {
	opacity: 1;
}

svg .svg-elem-1 {
  stroke-dashoffset: 218.47589111328125px;
  stroke-dasharray: 218.47589111328125px;
  -webkit-transition: stroke-dashoffset 0.4s ease-in 0s;
          transition: stroke-dashoffset 0.4s ease-in 0s;
}

.load-on svg .svg-elem-1 {
  stroke-dashoffset: 0;
}

svg .svg-elem-2 {
  stroke-dashoffset: 44.57436752319336px;
  stroke-dasharray: 44.57436752319336px;
  -webkit-transition: stroke-dashoffset 0.4s ease-in 0.3s;
          transition: stroke-dashoffset 0.4s ease-in 0.3s;
}

.load-on svg .svg-elem-2 {
  stroke-dashoffset: 0;
}

svg .svg-elem-3 {
  stroke-dashoffset: 218.47116088867188px;
  stroke-dasharray: 218.47116088867188px;
  -webkit-transition: stroke-dashoffset 0.4s ease-in 0.6s;
          transition: stroke-dashoffset 0.4s ease-in 0.6s;
}

.load-on svg .svg-elem-3 {
  stroke-dashoffset: 0;
}

svg .svg-elem-4 {
  stroke-dashoffset: 44.57884979248047px;
  stroke-dasharray: 44.57884979248047px;
  -webkit-transition: stroke-dashoffset 0.4s ease-in 0.8999999999999999s;
          transition: stroke-dashoffset 0.4s ease-in 0.8999999999999999s;
}

.load-on svg .svg-elem-4 {
  stroke-dashoffset: 0;
}

svg .svg-elem-5 {
  stroke-dashoffset: 218.47518920898438px;
  stroke-dasharray: 218.47518920898438px;
  -webkit-transition: stroke-dashoffset 0.4s ease-in 1.2s;
          transition: stroke-dashoffset 0.4s ease-in 1.2s;
}

.load-on svg .svg-elem-5 {
  stroke-dashoffset: 0;
}

svg .svg-elem-6 {
  stroke-dashoffset: 44.587135314941406px;
  stroke-dasharray: 44.587135314941406px;
  -webkit-transition: stroke-dashoffset 0.4s ease-in 1.5s;
          transition: stroke-dashoffset 0.4s ease-in 1.5s;
}

.load-on svg .svg-elem-6 {
  stroke-dashoffset: 0;
}