@import url('https://fonts.googleapis.com/css2?family=Averia+Sans+Libre&family=Kosugi+Maru&family=Noto+Sans&family=Noto+Sans+JP&display=swap');

/* ------------------------------------------------------------------ */
/* Base
/* ------------------------------------------------------------------ */

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

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

audio,
canvas,
video {
   display: inline-block;
}

audio:not([controls]) {
   display: none;
   height: 0;
}

[hidden] { display: none; }

code, kbd, pre, samp {
   font-family: monospace, serif;
   font-size: 1em;
}

pre {
   white-space: pre;
   white-space: pre-wrap;
   word-wrap: break-word;
}

blockquote, q { quotes: &#8220 “ }

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

ins {
   background-color: #ff9;
   color: #000;
   text-decoration: none;
}

mark {
   background-color: #A7F4F6;
   color: #555;
}

del { text-decoration: line-through; }

abbr[title], dfn[title] {
   border-bottom: 1px dotted;
   cursor: help;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

*,
*:before,
*:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

html { font-size: 62.5%; }

body {
   background: #fff;
   font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
   font-weight: normal;
   font-size: 15px;
   line-height: 1.6em;
   color: #222;

   -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
   -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
   font-family: 'Noto Sans', 'Noto Sans JP', sans-serif; 
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 38px; }
h2 { font-size: 36px; }
h3 { font-size: 22px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 14px; }

a, a:visited {
   text-decoration: none;
   outline: 0;
   color: #204D58;

   -webkit-transition: color .3s ease-in-out;
   -moz-transition: color .3s ease-in-out;
   -o-transition: color .3s ease-in-out;
   transition: color .3s ease-in-out;
}
a:hover, a:focus { color: #333; }
p a, p a:visited { line-height: inherit; }

ul, ol { margin: 0; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 6px 0 6px 30px; }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }
ul.large li { }
li p { }

img,
video,
iframe,
embed,
object {
   max-width: 100%;
   height: auto;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
   display: block;
   padding: 7px 15px;
   margin: 0;
   border: 1px solid #ccc;
   outline: none;
   vertical-align: middle;
   width: 100%;
   font-size: 15px;
   line-height: 24px;
   color: #222;
   border-radius: 6px;
   font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
}
textarea {
   height: 150px;
}
/* ↓消すかも*/
button,
button::after {
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
}
button {
   background: #204D58;
   border: 0;
   border-radius: 25px;
   color: #F9DC59;
   font-family: 'Kosugi Maru';
   display: block;
   font-size: 20px;
   margin: 0 auto;
   padding: 25px;
   position: relative;
   text-transform: uppercase;
   width: 270px;
   cursor: pointer;
}
button::before,
button::after {
   background: #F9DC59;
   border: 0;
   border-radius: 25px;
   content: '';
   position: absolute;
   z-index: -1;
   height: 100%;
   left: 0;
   top: 0;
   width: 0%;
}

button:hover {
   color: #204D58;
   opacity: 0.8;
}
button:hover:after {
   width: 100%;
}
/*↓new*/
.button,
.button::after {
   text-align: center;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
}
.button {
   display: block;
   background: #204D58;
   border: 0;
   border-radius: 25px;
   color: #F9DC59;
   font-family: 'Kosugi Maru';
   font-size: 18px;
   margin: 0 auto;
   padding: 25px;
   position: relative;
   text-transform: uppercase;
   width: 270px;
   cursor: pointer;
}
.button::before,
.button::after {
   background: #F9DC59;
   border: 0;
   border-radius: 25px;
   content: '';
   position: absolute;
   z-index: -1;
   height: 100%;
   left: 0;
   top: 0;
   width: 0%;
}

.button:hover {
   color: #204D58;
   opacity: 0.8;
}
.button:hover:after {
   width: 100%;
}
.disabled_button {
   display: none;
   text-align: center;
   background: #666;
   color: #ccc;
   border: 0;
   border-radius: 25px;
   font-family: 'Kosugi Maru';
   font-size: 20px;
   margin: 0 auto;
   padding: 25px;
   position: relative;
   text-transform: uppercase;
   width: 270px;
}



/* ------------------------------------------------------------------ */
/* Common
/* ------------------------------------------------------------------ */
.sp { display: none; }
@media only screen and (max-width: 900px) {
   .sp { display: block; }
}
.pc { display: none; }
@media only screen and (min-width: 900px) {
   .pc { display: block; }
}


.animated {
   animation-duration: 1.0s;
}

/*
.marker {
   background: linear-gradient(transparent 50%, rgba(206, 177, 128, 0.2) 0%) ;
   display: inline;
}
*/

/* ------------------------------------------------------------------ */
/* Page
/* ------------------------------------------------------------------ */

.loading {
   width: 100%;
   height: 100%;
   background: #fff url("../images/loader.svg") 50% 50% no-repeat;
   background-size: 40px;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 20000;
}



header {
   background-color: unset;
   box-shadow: none;
   height: 64px;
   width: 100%;
/*
   position: fixed;
   left: 0;
   top: 0;
   z-index: 990;*/
}
header.header-normal {
   box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 10px 0px;
   border-bottom-color: rgba(0, 0, 0, 0.06);
   background-color: rgba(255, 255, 255, 0.97);
   animation: fade-in 2s;
   -webkit-animation: fade-in 2s;
   -moz-animation: fade-in 2s;
   -o-animation: fade-in 2s;
}
@-webkit-keyframes fade-in {
   from { opacity: 0; }
   to { opacity: 1; }
}
@-moz-keyframes fade-in {
   from { opacity: 0; }
   to { opacity: 1; }
}
@-o-keyframes fade-in {
   from { opacity: 0; }
   to { opacity: 1; }
}
@keyframes fade-in {
   from { opacity: 0; }
   to { opacity: 1; }
}

/* header logo */
header .logo {
   display: none;
   margin-left: 36px;
   margin-right: 20px;
   margin-top: 14px;
   float: left;
   width: auto; 
   z-index: 991; 

   /* add position relative since z-index only applies to  
   elements that have been given an explicit position */
   position: relative; 
}
header.header-normal .logo {
   display: block;
}

header .logo a {
   display: block;
   margin: 0;
	padding: 0;
	border: none;
	outline: none;
   width: 180px;
}

/* header social */
header .header-social {
	font-size: 17px;
   font-weight: normal;
   line-height: 54px;
   color: #424a56;
   margin: 0 10px 0 0;
   padding: 0;
}
header .header-social li {
   display: inline-block;
   margin-right: 20px;
}
header .header-social li a { color: #fff; }
header .header-social li a:hover { color: #11ABB0; }

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
	 margin: 0;
	 border: none;
	 outline: none;
}

/* nav-wrap */
#nav-wrap {
   font: 15px 'Averia Sans Libre', sans-serif;
   font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 1.0px;
   float: right;
}

/* hide toggle button */
#nav-wrap > a { display: none; }

ul#nav {
   margin-right: 36px;
}
ul.nav {
   min-height: 64px;
   width: auto;

   /* left align the menu */
   text-align: left;
}
ul.nav li {
   position: relative;
   list-style: none;
   height: 54px;
   display: inline-block;

}

/* Links */
ul.nav li a {
   display: inline-block;
   padding: 8px 8px;
   line-height: 48px;
   text-decoration: none;
   text-align: left;
   color: #204D58;
   font-weight: bold;
   text-shadow: 0px 0px 5px #fff;
   -webkit-transition: color .2s ease-in-out;
   -moz-transition: color .2s ease-in-out;
   -o-transition: color .2s ease-in-out;
   -ms-transition: color .2s ease-in-out;
   transition: color .2s ease-in-out;
}
header.header-normal ul.nav li a:hover { color: #0093b8; }
header.header-normal ul.nav li a:active { background-color: transparent !important; }
header.header-normal ul.nav li.current a { color: #0093b8; }

ul.nav li a { color: #204D58; }
ul.nav li a:hover { opacity: 0.6; }
ul.nav li.current a { color: #204D58; }



/* ------------------------------------------------------------------ */
/* Modal Dialog
/* ------------------------------------------------------------------ */
.modal-overlay {
   z-index: 1000;
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background-color: rgba(0,0,0,.5);
 }
.modal-content {
   position: fixed;
   display: none;
   z-index: 1010;
   box-sizing:border-box;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   background-color: #efefef;
   color: #555;
   width: calc(100% - 20px);
   max-width: 900px;
   height: calc(100vh - 40px);
   font-size: 20px;
 }
a.modal-close {
   position:absolute;
   top: 0;
   right: 15px;
   color: #333;
   font-size: 35px;
   line-height: 1;
   font-weight: normal;
   text-decoration: none;
   cursor: pointer;
 }

.modal-container {
   margin: 0;
}
.modal-container ._note {
   color: #c0c0c0;
}
#modal-confirm-content {
   display: block;
   padding: 60px 60px 35px;
}
#modal-thankyou-content {
   display: none;
   padding: 30vh 60px 35px;
}
.modal-top-message {
   text-align: center;
   margin: 0 0 20px;
}

.modal-vote-comment {
   margin: 35px 0 0;
   height: 155px;
   overflow-y: scroll;
}
.modal-thankyou-message {
   text-align: center;
   margin-top: 70px;
}
.modal-bottom-button {
   position: absolute;
   bottom: 40px;
   left: 50%;
   transform: translateX(-50%);
}
#modal-confirm h4 {
   text-align: center;
   margin: 10px auto 30px;
   font-size: 18px;
   font-family: 'Kosugi Maru';
   color: #204D58;
}
.confirm-data {
   margin: 10px auto;
   font-size: 15px;
   height: calc(100vh - 300px);
   overflow-y: auto;
}
.confirm-data::-webkit-scrollbar {
    width: 10px;
    background: #e0e0e0;
}
.confirm-data::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #d0d0d0;
}
.confirm-data dl {
   width: 100%;
   display: inline-flex;
   border-bottom: 1px solid #cfcfcf;
   word-break: break-all;
}
.confirm-data dl dt {
   min-width: 200px;
   padding: 10px 20px;
   font-weight: normal;
   font-family: 'Kosugi Maru';
   color: #204D58;
   text-align: left;
} 
.confirm-data dl dd {
   font-weight: normal;
   padding: 10px 0;
   text-align: left;
} 
.confirm-data-comment {
   font-size: 15px;
   padding: 15px;
}


/* ------------------------------------------------------------------ */
/* Top Section
/* ------------------------------------------------------------------ */
/*
#top {
   width: 100%;
   padding-top: 130px;
   overflow: hidden;
   text-align: center;
   background: repeat left top url(../images/top_bg.png) #fff;
   background-size: 800px;
   background-position: center;
   height: 710px;
   position:fixed;
   top: 0;
   z-index: -1;
}
*/
#top {
   height: 0.5px;
}
.top_inner {
   width: 100%;
   padding-top: 130px;
   overflow: hidden;
   text-align: center;
   background: repeat left top url(../images/top_bg.png) #fff;
   background-size: 850px;
   height: 1000px;
   animation: bg-slider 100s linear infinite;
   position:fixed;
   top: 0;
   z-index: -1;
}
@keyframes bg-slider {
   from {
      background-position: 0 0;
   }
   to {
      background-position: -850px 0;
   }
}
.top-logo {
   width: 580px;
   margin: 0 auto;
   background: no-repeat center top url(../images/top_title_bg.svg);
   background-size: 580px;
   animation: logo-swing 3s ease-in-out infinite alternate;
}
.top-logo img {
   width: 408px;
   margin: 125px auto;
}
@keyframes logo-swing {
   from { 
      -moz-transform: rotate(-2deg);
      -webkit-transform: rotate(-2deg);
      transform: rotate(-2deg);
      -moz-transform-origin: center middle;
      -webkit-transform-origin: center middle;
      transform-origin: center middle;
   }
   to { 
      -moz-transform: rotate(2deg);
      -webkit-transform: rotate(2deg);
      transform: rotate(2deg);
      -moz-transform-origin: center middle;
      -webkit-transform-origin: center middle;
      transform-origin: center middle;
   }
}


/* ------------------------------------------------------------------ */
/* About Section
/* ------------------------------------------------------------------ */
#about {
   width: 100%;
   overflow: hidden;
   margin: 540px auto 0;
   text-align: center;
}
#about h1 {
   visibility: hidden;
   font-size: 28px;
   line-height: 1.8em;
   color: #F9DC59;
   font-family: 'Kosugi Maru';
   margin-bottom: 70px;
}
.about_head {
   width: 100%;
   background: repeat left top url(../images/green-wave.svg);
   background-size: 2000px;
   height: 130px;
}
.about_body {
   margin-top: -5px;
   width: 100%;
   background-color: #204D58;
}
.about_body_inner {
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 100px 100px;
}
.service_box {
   visibility: hidden;
   width: 700px;
   margin: 0 auto 70px 0;
   border-radius: 100px;
   background: repeat-x left top url(../images/yellow_bg.png) #fff;
   background-size: 170px;
}
.service_box:nth-child(odd) {
   margin: 0 0 0 auto;
}
.service_header {
   display: flex;
   height: 170px;
}
.service_header .service_header_icon {
   width: 40%;
   line-height: 0;
}
.service_header .service_header_icon img {
   width: 150px;
   margin: 10px;
}
.service_header h2 {
   font-family: 'Averia Sans Libre', 'Kosugi Maru';
   color: #204D58;
   padding: 50px 0 40px 120px;
   width: 60%;
   text-align: left;
}
.service_title_caption {
   font-size: 20px;
   letter-spacing: 2px;
   line-height: 36px;
}
.service_title {
   font-size: 26px;
   letter-spacing: 3px;
   line-height: 34px;
}
.service_text_box {
   margin-top: -2px;
   background: repeat-x left top url(../images/dot_line.svg);
   background-size: 8px;
   padding: 30px 60px 40px;
}
.service_text {
   text-align: left;
}
.service_text>p {
   margin-bottom: 1em;
}
.service_text>p.service_text_note {
   font-size: 14px;
   color: #666;
}


/* ------------------------------------------------------------------ */
/* Company Section
/* ------------------------------------------------------------------ */
#company {
   width: 100%;
   background-color: #F9DC59;
   text-align: center;
   padding-bottom: 120px;
}
#company h3 {
   visibility: hidden;
   font-size: 30px;
   font-family: 'Kosugi Maru';
   color: #204D58;
   letter-spacing: 3px;
   margin: 90px auto 40px;
}
.company_deco {
   width: 100%;
   height: 30px;
   background: repeat-x left top url(../images/top_cp_deco.svg);
   background-size: 40px;
}
.company_data {
   visibility: hidden;
   width: 700px;
   text-align: left;
   margin: 0 auto;
   background: repeat-x left -6px top url(../images/dot_line.svg);
   background-size: 8px;
}
.company_data li {
   display: flex;
   background: repeat-x left -6px bottom url(../images/dot_line.svg);
   background-size: 8px;
   padding: 15px 40px;
   margin-bottom: 0;
}
.company_data_label {
   width: 30%;
   font-family: 'Kosugi Maru';
   color: #204D58;
}
.company_data_text {
   width: 70%;
}



/* ------------------------------------------------------------------ */
/* Contact Section
/* ------------------------------------------------------------------ */
#contact {
   background: #fff;
   padding: 20px 0 120px;
   text-align: center;
}
#contact h3 {
   visibility: hidden;
   width: 600px;
   height: 130px;
   margin: 0 auto 20px;
   font-size: 30px;
   font-family: 'Kosugi Maru';
   color: #204D58;
   letter-spacing: 3px;
   line-height: 160px;
   background-image: url(../images/miho.png), url(../images/rocka.png);
   background-size: 120px, 48px;
   background-position: left 30px top, right 100px top;
   background-repeat: no-repeat, no-repeat;
}
.contact_data {
   visibility: hidden;
   width: 600px;
   text-align: left;
   margin: 0 auto 30px;
}
.contact_data li {
   margin-bottom: 20px;
}
.contact_data_label {
   width: 100%;
   font-family: 'Kosugi Maru';
   color: #204D58;
   margin-bottom: 7px;
}
.contact_data_text {
   width: 100%;
}
.contact_form_error {
   font-size: 12px;
   color: #a52a2a;
}
button {
   visibility: hidden;
}
.confirm_button {
   visibility: hidden;
}




/* ------------------------------------------------------------------ */
/* Footer
/* ------------------------------------------------------------------ */

footer {
   padding: 40px 0 30px;
   color: #58687A;
   font-size: 13px;
   line-height: 24px;
   position: relative;   
   text-align: center;
   background: #eee;
   font-size: 0.9em;
}

footer a, footer a:visited { color: #666; }
footer a:hover, footer a:focus { opacity: 0.6;}

footer .copyright {
   margin: 0;
   padding: 0 18px;
   clear: both;
   font-size: 12px;
}
.footer-logo {
   width: 240px;
   margin-bottom: 10px;
}

.grecaptcha_caption {
   color: #999; 
   font-size: 10px;
   margin: 10px auto;
   line-height: 1.4em;
}
.grecaptcha-badge { visibility: hidden; }