@charset "utf-8";


@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900&display=swap);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,500,600,700&display=swap);
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0;}table { border-collapse:collapse; border-spacing:0;}fieldset,img { border:0; vertical-align:bottom;}address,caption,cite,scode,dfn,em,strong,th,var {font-style:normal; font-weight:normal;}ol,ul,li { list-style:none; padding:0; margin:0;}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;}
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

html,body {
	width: 100%;
    overflow-x: hidden;
}

:root {
	--white: #fff;
    --gray: #ddd;
    --light-gray: #f5f5f5;
    --black: #333;
    --pink: #ca5495;
    --purple: #9058a7;
    --light-purple: #f4eff7;
    --blue: #47aff9;
    --light-blue: #44b3e1;
    --yellow: #f5c400;
    --brown: #917c3f;
    --orange: #E99E4C;
    --teal: #ff5050;
    --red: #EF584E;
    --base: #f8fbff;
    --green: #3da937;
    --font: #1a2a40;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}
body{
    font-family: 'Noto Sans JP', serif;
    font-weight: 500;
	font-size: 14px;
	color: var(--font);
    -webkit-text-size-adjust: 100%;
    letter-spacing: 1.1px;
    word-break: break-all;
    background-color: #fff;
}

p {
    font-size: 14px;
    font-weight: 500;
	color: var(--font);
    line-height: 1.8;
    letter-spacing: 1px;
}

img {
	max-width: 100%;
}



/* マウスオーバー時の背景色 */
::selection {
    background: #333;
    color: #fff;
}

/* 明朝体の指定 */
.mincho {
    font-family: 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
    text-transform: uppercase;
}
/* 英語の指定 */
.gf {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
}
.gf2 {
	font-family: 'Cormorant Garamond', serif;
    text-transform: uppercase;
}
/* FontIcon */
.fa, .fas {
    font-weight: 900;
    padding-right: 5px;
}

button[type="submit"],
input[type="submit"],
input[type="button"] {
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  box-sizing: border-box;
  cursor: pointer;
}
button[type="submit"]::-webkit-search-decoration,
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
button[type="submit"]::focus,
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

strong {
	font-weight: 600;
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 78%, #ffeb00 0%) repeat scroll 0 0;
}


@media screen and (max-width: 767px) {

    @keyframes ttl_before {
        0% {
            height: 0
        }

        100% {
            height: 40px
        }
    }
}


@keyframes hero_ttl_bg {
    0% {
        left: 0;
        right: 100%
    }

    40% {
        left: 0;
        right: 0
    }

    60% {
        left: 0;
        right: 0
    }

    100% {
        left: 100%;
        right: 0
    }
}

@keyframes fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadein_lft {
    0% {
        opacity: 0;
        transform: translateX(-8px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}
@keyframes loop {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes loop2 {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
}


/* ---------- Geometric shapes ---------- */
.geo {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}
/* Triangle orange */
.geo--triangle-orange {
	width: 70px;
	height: 70px;
	background: var(--blue);
	opacity: .4;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	animation: geoFloat 7s ease-in-out infinite alternate;
}
/* Hexagon teal */
.geo--hex-teal {
	width: 72px;
	height: 64px;
	opacity: .4;
	background: var(--teal);
	clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
	animation: geoFloat 9s ease-in-out infinite alternate-reverse;
}
/* Circle yellow */
.geo--circle-yellow {
	width: 64px;
	height: 64px;
	background: var(--yellow);
	opacity: .4;
	border-radius: 50%;
	animation: geoFloat 8s ease-in-out infinite alternate;
}
/* Diamond green */
.geo--diamond-green {
	width: 60px;
	height: 60px;
	background: var(--green);
	clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
	opacity: .4;
	animation: geoFloat 6s ease-in-out infinite alternate-reverse;
}
/* Small triangle blue */
.geo--triangle-blue {
	width: 50px;
	height: 50px;
	background: var(--blue);
	clip-path: polygon(50% 0%,0% 100%,100% 100%);
	opacity: .4;
	animation: geoFloat 10s ease-in-out infinite alternate;
}
.geo--small  { transform: scale(.5); }
.geo--med    { transform: scale(.9); }
.geo--lg     { transform: scale(1.5); }

@keyframes geoFloat {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-24px) rotate(20deg); }
}


/* module
----------------------------------------------------*/

.flex_in {
	display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}


.mb {
	display: none !important;
}
.none {
	display: none !important;
}


/* fadein
----------------------------------------------------------- */

.fade {
    position: relative;
    transition: 0.8s;
    opacity: 0;
    transform: translate(0,150px);
    -webkit-transform: translate(0,150px);
}
.fade_left {
    position: relative;
    transition: 0.8s;
    opacity: 0;
    transform: translateX(150px);
    -webkit-transform: translateX(150px);
}
.fade_right {
    position: relative;
    transition: 0.8s;
    opacity: 0;
    transform: translateX(-150px);
    -webkit-transform: translateX(-150px);
}
.fade_down {
    position: relative;
    transition: 0.8s;
    opacity: 0;
    transform: translate(0,-150px);
    -webkit-transform: translate(0,-150px);
}
.fade_in {
    opacity: 1.0 !important;
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
}

/* lauout
----------------------------------------------------*/

.inner:after, #header #g_navi:after,#content:after, #side:after,、s:after,ul:after,dl:after,#photo-view:after,.clear:after,.wrap:after,.contents-box-list:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}

a {
    color: var(--blue);
	text-decoration: none;
}
a:link {
    color: var(--blue);
}
a:visited {
	color: #9B1818;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

section {
    position: relative;
	padding: 60px 0px;
}
body.home section {
	padding: 120px 0px;
}


.area {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0px;
}
#wrapper {
	margin: 0 auto;
}

#content {
	margin: 0 auto;
	padding: 0px 0px 30px;
}


#content .in {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
#content.wide .in {
    max-width: 800px;
    min-width: 800px;
    padding: 40px;
    background: #fff;
    box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 5%);
}
.inner {
	position: relative;
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
}

#main {
	width: calc(100% - 300px);
    max-width: 776px;
    margin-right: 20px;
    padding: 30px;
	background-color: #fff;
    box-shadow: 0px 1px 10px 0px rgb(0 0 0 / 10%);
}
#main .in {
	
}
.wide #main {
	float: none;
	width: 100%;
}
#main img {
    max-width: 100%;
    height: auto;
}
img.aligncenter {
    display: block;
    margin: 0 auto;
    text-align: center;
}

#side {
	width: 280px;
}
#side_wrap {
	width: 280px;
}
.t_center {
	text-align: center;
}
.fixed {
    position: fixed !important;
    top: 0px;
    z-index: 9999;
}


/*	html部品
----------------------------------------------------*/

input,button,textarea,select {
    font-family: 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
    font-size: 14px;
    letter-spacing: 0.5px;
}

input[type="search"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="tel"],
input.login,
select {
	/*width: 100%;*/
	height: 42px;
	line-height: 1.6;
	padding: 4px;
	border-radius:3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	background-color: white;
	border: 1px solid #dcdcdc;
	-moz-box-shadow: 0 1px 0 white;
	-webkit-box-shadow: 0 1px 0 white;
	box-shadow: 0 1px 0 white;
}

#wrapper table select {
	padding: 0px 4px;
	height: 36px;
	line-height: 1.6;
}

textarea {
	width: 98% !important;
	min-height: 65px;
	padding: 4px;
	border-radius:3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	background-color: white;
	border: 1px solid #dbdbdb;
	-moz-box-shadow: 0 1px 0 white;
	-webkit-box-shadow: 0 1px 0 white;
	box-shadow: 0 1px 0 white;
}


.btn-entry {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 52px;
  background: var(--black);
  color: #fff !important;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  border-radius: 100px;
  transition: background .3s, transform .25s, box-shadow .3s;
}
.btn-entry:hover {
  background: #000;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(58,106,144,.3);
}
.btn-entry svg { transition: transform .3s; }
.btn-entry:hover svg { transform: translateX(4px); }