@charset "utf-8";

/******************************************************************
basement
******************************************************************/
html {
  scroll-behavior: smooth;
}
body {
/*  position: relative;*/
  background: #fff;
  color: #2B2B2B;
  font-weight:normal;
  font-size:16px;
  line-height:1.8;
/*  font-family: "Times New Roman", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;*/
  letter-spacing: 0.08em;
  font-family: sans-serif;
  text-align:center;
  box-sizing: border-box;
}
p {
  font-size: 14px;
  line-height: 2.3;
  font-family: sans-serif;
}
a {
  opacity: 1;
  color:#000;
  text-decoration: none;
  outline: none;
  transition : opacity 0.4s;
  -webkit-transition : opacity 0.4s;
}
a:hover {
  opacity: 0.6;
}
img {
  width:100%;
  height: auto;
}
img.imgf {
  width: calc( 95% - 24px );
  max-width: 720px;
  margin: auto;
}

.inner {
  width: 1000px;
/*  width: 800px;*/
  margin: 0 auto;
}
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }

@media screen and (max-width:736px){
  body{
    width: 100%;
    font-size: 14px;
  }
  p {
    line-height: 1.9;
  }
  .inner {
    width: 100%;
    padding: 0 20px;
  }
}

section {
  overflow: hidden;
}

/* option */
span.br{ display: inline-block;}
.pc{ display: inherit; padding: 0; margin: 0; letter-spacing: 0; }
.sp{ display: none; }
.att{ font-size: 12px; }
@media screen and (max-width:736px){
  .pc{ display: none; }
  .sp{ display: inherit; }
}




/******************************************************************
header
******************************************************************/
.header {
  position: relative;
  width: 100%;
  border-top: 15px solid #069EDC;
  height: 85px;
  z-index: 10;
}
.gnav {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  margin: 10px auto;
  padding: 15px 0 0;
}
.gnav li {
  padding-bottom: 5px;
  border-bottom: 2px solid #fff;
  list-style: none;
/*  padding: 0 10px;*/
}
.gnav li:hover {
  border-bottom: 2px solid #000;
}
@media screen and (max-width:736px){
  .header {
    position: relative;
    width: 100%;
    border-top: 5px solid #069EDC;
    height: 85px;
    z-index: 10;
  }

}


/******************************************************************
hero
******************************************************************/
.hero {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 500px;
  margin-bottom: 0px;
/*  background: no-repeat center bottom url("../images/shibuya.jpg");*/
/*  background-size: cover;*/
}
.hero .ttl {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  margin: auto;
/*  background: no-repeat center bottom url("../img/logo.png");*/
  background: no-repeat center bottom url("../img/logo0.svg");
  width: 600px;
  height: 208px;
  animation-duration: 2s;
}
.logo {
  position: relative;
  height: 208px;
  margin: 0 auto 0px;
}
.dish {
  position: absolute;
  left: 0;
/*  top: 50%; left: 50%;*/
/*  transform: translate(-50%, -50%);*/
  width: 80%;
  max-width: 600px;
  margin: auto;
  width: 600px;
  height: 208px;
}
.delay1 { animation-delay: 0.5s }
.delay2 { animation-delay: 0.6s }
.delay3 { animation-delay: 0.7s }
.delay4 { animation-delay: 0.8s }
.delay5 { animation-delay: 0.9s }
.delay6 { animation-delay: 1.0s }
.delay7 { animation-delay: 1.1s }
@media screen and (max-width:736px){
  .hero {
    height: 200px;
  }
  .hero .ttl {
/*    width: 80vw;*/
    width: 300px;
    transform: translate(-50%, -70%);
  }
  .hero .logo {
/*    width: 80vw;*/
/*    display: none;*/
  }
  .logo {
/*    position: relative;*/
    height: 104px;
    margin: 0 auto 0px;
  }
  .dish {
    position: absolute;
    left: 0;
    top: 50%;
/*   left: 50%;*/
    transform: translate(-50%, -50%);
    width: 300px;
/*    max-width: 600px;*/
    margin: auto;
/*    width: 600px;*/
/*    height: 208px;*/
/*    width: 200px;
    height: 100px;*/
  }
}


/******************************************************************
Anchor Link
******************************************************************/
.anchorLinkWrapper {
  width: 100%;
  height: 300px;
  background: repeat-x center bottom url("../img/hero_bg.png");
/*  background-size: cover;*/
  margin-top: -30px;
  margin-bottom: 10px;
  background-size: auto 250px; /* 画像の高さ */
  animation: loop 100s linear infinite;
}
@keyframes loop {
    from {
        background-position: 0 bottom;
    }
    to {
        background-position: -2000px bottom; /* 画像のマイナス幅 */
    }
}
.anchorLink {
  display: flex;
  justify-content: space-between;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0px auto 0;
  padding: 0 0 20px;
  text-align: center;
}
.anchorLink img {
  width: 300px;
  margin: 0 10px;
  border: 1px solid #999;
}
.anchorLink button {
  width: 240px;
/*  height: 80px;*/
  margin: 0 10px;
  padding: 0px 0 10px;
  box-sizing: border-box;
/*  background-color: #069EDC;*/
  border: 3px solid #069EDC;
  border-radius: 10px;
  color: #069EDC;
  font-weight: bold;
  font-size: 36px;
  line-height: 1.3;
  transition: background 0.5s;
}

.anchorLink2 button {
  width: 100%;
  width: 500px;
  font-size: 24px;
  padding-top: 10px;
  color: #fff;
  background-color: #069EDC;
}
.anchorLink button small {
  font-size: 16px;
}
.anchorLink button:hover {
  background-color: #069EDC;
  color: #fff;
}
.anchorLink a:hover {
  opacity: 1;
}

.anchorLink2 button:hover {
  opacity: 0.8;
}

@media screen and (max-width:736px){
  .anchorLinkWrapper {
    width: 100%;
    height: 230px;
    background: repeat-x center bottom url("../img/hero_bg.png");
  /*  background-size: cover;*/
    margin-top: 30px;
    margin-bottom: 10px;
    background-size: auto 150px; /* 画像の高さ */
    background-position: bottom;
    animation: loop 100s linear infinite;
  }
  .anchorLink {
    padding: 0px 0 10px;
  }
  .anchorLink button {
    width: 240px;
  /*  height: 80px;*/
    margin: 0 10px;
    padding: 0px 5px 10px;
    box-sizing: border-box;
  /*  background-color: #069EDC;*/
    border: 2px solid #069EDC;
    border-radius: 10px;
    color: #069EDC;
    font-weight: bold;
    font-size: 30px;
    line-height: 1.1;
    transition: background 0.5s;
/*    width: 43%;*/
    width: 90%;
/*    border: 1px solid #999;*/
  }
  
  .anchorLink2 button {
    width: 340px;
    margin: 10px 20px;
    font-size: 20px;
    padding-top: 10px;
    color: #fff;
    background-color: #069EDC;
  }
  .anchorLink button small {
    font-size: 14px;
  }
  .anchorLink button:hover {
    background-color: #069EDC;
    color: #fff;
  }
  .anchorLink a:hover {
    opacity: 1;
  }

}


/******************************************************************
about
******************************************************************/
.about {
/*  height: 900px;*/
  padding-top: 100px;
  padding-bottom: 300px;
  background-color: #069EDC;
  color: #fff;
  text-align: left;
  text-align: center;
  background: #069EDC no-repeat center bottom url("../img/about_bg.png");
  background-size: contain;
}
.about .inner {
  width: 900px;
}
.about .title {
  margin-bottom: 10px;
  font-family: sans-serif;
  font-weight: 900;
  font-weight: bold;
  font-size: 60px;
}
.about .text {
/*  width: 600px;*/
}
.about .text p {
  margin-bottom: 1.5rem;
  font-size: 18px;
  line-height: 2;
  text-align: justify;
}
.about img {
  padding-top: 30px;
  width: 700px;
}

@media screen and (max-width:736px){
  .about {
  /*  height: 900px;*/
    padding-top: 70px;
    padding-bottom: 150px;
    background-color: #069EDC;
    color: #fff;
    text-align: left;
    text-align: center;
    background: #069EDC no-repeat center bottom url("../img/about_bg.png");
    background-size: contain;
  }
  .about .inner {
    width: 100%;
    padding: 0 30px;
  }
  .about .title {
    margin-bottom: 10px;
    font-family: sans-serif;
    font-weight: 900;
    font-weight: bold;
    line-height: 1.3;
    font-size: 40px;
  }
  .about .title span {
    font-size: 0.6em;
  }
  .about .text {
  /*  width: 600px;*/
  }
  .about .text p {
    margin-bottom: 1.5rem;
    font-size: 14px;
    line-height: 1.5;
    text-align: justify;
  }
  .about img {
    padding-top: 30px;
    width: 100%;
  }
}



/******************************************************************
declaration
******************************************************************/
.declaration {
/*  height: 900px;*/
  margin-top: 10px;
  padding-top: 100px;
  padding-bottom: 100px;
/*  padding-bottom: 300px;*/
  background-color: #F5F5FF;
  color: #069EDC;
  text-align: left;
  text-align: center;
/*  background: #069EDC no-repeat center bottom url("../img/about_bg.png");*/
/*  background-size: contain;*/
}
.declaration .title {
  margin-bottom: 10px;
  font-family: sans-serif;
  font-weight: 900;
  font-weight: bold;
  font-size: 60px;
}
.declaration .text {
/*  width: 600px;*/
}
.declaration .text p {
  margin: 0 auto;
  margin-bottom: 1.5rem;
  font-size: 18px;
  line-height: 2;
  color: #000;
}
.declaration .text p.caution {
  line-height: 1.7;
}

.declaration_detail {
  text-align: justify;
  padding-bottom: 20px;
}
.declaration .midashi {
  color: #000;
}
.declaration ol {
  margin-left: 1.6rem;
  color: #000;
}
.declaration ol li {
  margin-bottom: 0.25rem;
}

.application {
  display: flex;
  justify-content: center;
  align-items: center;
}
.application img {
  width: 500px;
}
.application h3 {
  padding: 10px;
  border: 2px solid #069EDC;
  background: #fff;
}
.register,
.register3 {
  order: 1;
}
.order2 {
  order: 2;
}
.register h3,
.register3 h3 {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 15px 20px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 20px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
  line-height: 1.5;
}
.register h3:before,
.register3 h3:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #FFF;
  z-index: 2;
}

.register h3:after,
.register3 h3:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #555;
  z-index: 1;
}
.register2 {
/*  order: 2;*/
}
.register2 h3 {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 15px 20px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 20px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
  line-height: 1.5;
}
.register2 h3:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}

.register2 h3:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #555;
  z-index: 1;
}
.declaration button {
  width: 350px;
  height: 80px;
  border-radius: 11% / 50%;
  background: #3FAF49;
  color: #fff;
}
.declaration a {
  display: block;
  padding: 15px;
  border-radius: 10%;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}



.arrow {
  position: relative;
}
.arrow:after {
    /* 擬似要素で三角アイコンをつくる */
    content: '';
    display: inline-block;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #fff;
    display: inline-block;
    width: 0;
    height: 0;
    /* 矢印アイコンの位置を設定 */
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%); /* translateYのみ */
}

.arrow-button{
    /* ボタンのCSS */
}

.declaration a:active{
    /* ボタンをクリックしたときに沈むように見える動き */
    box-shadow: 0 0 0 #C62828;
}



@media screen and (max-width:736px){
  .declaration {
    padding-top: 50px;
  }
  .declaration .title {
    font-size: 40px;
  }
  .declaration .text p {
    font-size: 14px;
    line-height: 1.5;
  }
  .declaration .text p.caution {
    line-height: 1;
  }

  .declaration_detail {
    text-align: justify;
    padding-bottom: 20px;
  }
  .declaration .midashi {
    color: #000;
  }
  .declaration ol {
    margin-left: 1.6rem;
    color: #000;
  }
  .declaration ol li {
    margin-bottom: 1rem;
    line-height: 1.5;
  }
    .declaration ol li small {
      line-height: 1.1
    }

  .application {
    display: inline-block;
    justify-content: center;
    align-items: center;
  }
  .application img {
    width: 100%;
  }
  .application h3 {
    padding: 10px;
    border: 2px solid #069EDC;
    background: #fff;
  }
  .register,
  .register3 {
    margin-bottom: 30px;
  }
  .register h3,
  .register3 h3 {
    position: relative;
    display: inline-block;
    margin: 1.5em 15px 300px 0;
    margin: 0 15px 1em 0;
    padding: 15px 20px;
    padding: 5px 10px;
/*    min-width: 120px;*/
    max-width: 100%;
    color: #555;
    font-size: 20px;
    font-size: 18px;
    background: #FFF;
    border: solid 3px #555;
    box-sizing: border-box;
    line-height: 1.5;
    line-height: 1.3;
  }
  .register3 h3 {
    margin: -1em 15px 1em 0;
  }
  .register h3:before,
  .register3 h3:before {
    content: "";
    display: none;
  }

  .register h3:after,
  .register3 h3:after {
    content: "";
    display: none;
  }
  .register2 {
    order: 2;
  }
  .register2 h3 {
    position: relative;
    display: inline-block;
    margin: 1.5em 15px 1.5em 0;
    margin: 0 15px 1em 0;
    padding: 15px 20px;
    padding: 5px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 20px;
    background: #FFF;
    border: solid 3px #555;
    box-sizing: border-box;
    line-height: 1.5;
    line-height: 1.3;
  }
  .register2 h3:before {
    content: "";
    display: none;
  }

  .register2 h3:after {
    content: "";
    display: none;
  }
  .declaration button {
    width: 300px;
    height: 60px;
    border-radius: 10% / 50%;
  }
  .declaration a {
    display: block;
    padding: 15px;
    border-radius: 10%;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
  }


}



/******************************************************************
advantage
******************************************************************/
.advantage {
/*  height: 900px;*/
  padding-top: 150px;
  padding-bottom: 150px;
  background-color: #fff;
  color: #069EDC;
  text-align: left;
  text-align: center;
}
.advantage .title {
  margin-bottom: 20px;
  font-family: sans-serif;
  font-weight: 900;
  font-weight: bold;
  font-size: 60px;
}
.advantage h3:before {
  background:linear-gradient(transparent 60%, #ff6 60%);
}
.advantage h3 {
  padding-top: 10px;
  padding-bottom: 1rem;
  font-size: 1.5rem;
  color: #000;
  line-height: 1.5;
}
.advantage img.list {
  width: 250px;
}
.advantage img.logomini {
  width: 300px;
  padding: 37px 0;
}
.advantage img.ml {
  width: 300px;
}
.advantage img.mtg {
  width: 300px;
}
.adwrapper {
  display: flex;
}
.aditem {
  width: 50%;
}
.advantage .text p {
  color: #000;
  line-height: 1.5;
  padding-bottom: 1rem;
}
.advantage a {
  color: #00f;
  text-decoration: underline;
}

@media screen and (max-width:736px){
  .advantage {
  /*  height: 900px;*/
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #fff;
    color: #069EDC;
    text-align: left;
    text-align: center;
  }
  .advantage .title {
    margin-bottom: 20px;
    font-family: sans-serif;
    font-weight: 900;
    font-weight: bold;
    font-size: 60px;
    font-size: 40px;
  }
  .advantage h3:before {
    background:linear-gradient(transparent 60%, #ff6 60%);
  }
  .advantage h3 {
    padding-top: 10px;
    padding-bottom: 1rem;
    font-size: 1.5rem;
    font-size: 14px;
    color: #000;
    line-height: 1.5;
    line-height: 1.2;
    text-align: left;
  }
  .advantage img.list {
    width: 250px;
    width: 90%;
  }
  .advantage img.logomini {
    width: 300px;
    width: 100%;
    padding: 21px 0;
  }
  .advantage img.ml {
    width: 300px;
    width: 100%;

  }
  .advantage img.mtg {
    width: 300px;
    width: 100%;
  }
  .adwrapper {
    display: flex;
  }
  .aditem {
    width: 50%;
    padding: 0 10px;
  }
  .advantage .text p {
    color: #000;
    line-height: 1.3;
    padding-bottom: 1rem;
    text-align: left;
    font-size: 13px;
  }
  .advantage a {
    color: #00f;
    text-decoration: underline;
  }
  .advantage .btn-arrow {
    width: 100%;
    border-radius: 16% / 50%;
    font-size: 12px;
    line-height: 1.2;
  }
}


/******************************************************************
flow
******************************************************************/
.flow {
  padding-top: 100px;
  padding-bottom: 150px;
  background-color: #fffff5;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  color: #000;
  text-align: left;
  text-align: center;
}
.flow .title {
  margin-bottom: 20px;
  font-family: sans-serif;
  font-weight: 900;
  font-weight: bold;
  font-size: 60px;
  color: #069EDC;
}
.flow ul {
  display: flex;
  width: 1000px;
  margin: 0 auto;
}
.flow li {
  width: 240px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
  margin: 0 10px;
  padding: 10px 0 20px;
  list-style: none;
}
.flow .step {
  padding-top: 20px;
  padding-bottom: 10px;
  font-family: arial, sans-serif;
  color: #069EDC;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}
.flow .step span {
  font-size: 40px;
}
.flow img {
  width: 240px;
}
.flow .text {
  line-height: 1.2;
}
@media screen and (max-width:736px){
  .flow {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #fffff5;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    color: #000;
    text-align: left;
    text-align: center;
  }
  .flow .title {
    margin-bottom: 20px;
    font-family: sans-serif;
    font-weight: 900;
    font-weight: bold;
    font-size: 60px;
    font-size: 36px;
    line-height: 1.2;
    color: #069EDC;
  }
  .flow ul {
    display: flex;
    display: block;
/*    width: 1000px;*/
    width: 100%;
    margin: 0;
    padding: 0;
/*    padding: 0 20px;*/
  }
  .flow li {
    width: 240px;
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
/*    margin: 0 10px;*/
/*    margin: 0 20px;*/
/*    padding: 10px 0 20px;*/
/*    padding: 20px 20px;*/
    margin: 0 0 20px;
    padding: 20px;
    list-style: none;
  }
  .flow .step {
    padding-top: 20px;
    padding-bottom: 10px;
    font-family: arial, sans-serif;
    color: #069EDC;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
  }
  .flow .step span {
    font-size: 40px;
  }
  .flow li > div {
    display: flex;
    justify-content: center;
  }
  .flow img {
    width: 150px;
    height: auto;
    margin-bottom: 10px;
  }
  .flow .text {
    line-height: 1.2;
  }
  .flowwrapper {
    padding: 0 30px;
  }
}


/******************************************************************
faq
******************************************************************/
.faq {
/*  height: 900px;*/
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: #fff;
  color: #000;
  text-align: left;
  text-align: center;
}
.faq .title {
  margin-bottom: 20px;
  font-family: sans-serif;
  font-weight: 900;
  font-weight: bold;
  font-size: 60px;
  color: #069EDC;
}
.faq .inner {
  width: 800px;
}
.faq .talk {
  text-align: left;
}
.faq h3:before {
  background:linear-gradient(transparent 60%, #ff6 60%);
}
.faq h3 {
  padding-top: 10px;
  padding-bottom: 1rem;
  font-size: 1.5rem;
  color: #000;
  line-height: 1.5;
}
.adwrapper {
  display: flex;
}
.aditem {
  width: 50%;
}
.faq .text p {
  color: #000;
  line-height: 1.5;
}




/* ----- 共通 ----- */

.talk {
margin-bottom: 40px;
}

.talk figure img {
width: 100%;
height: 100%;
/*border: 2px solid #9ce191;*/
/*border: 2px solid #fff;*/
/*filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));*/
border-radius: 50%;
margin: 0;
background-color: #fff;
}
.talk figure.talk-Rimg img {
  background-color: #5AC2DF;
}
.talk figure.talk-Limg img {
  background-color: #FEBE0F;
  background-color: #FABE00;
}



p.talk-text {
margin: 0 0 1rem;
line-height: 1.5;
}

p.talk-text.bold {
font-weight: bold;
}

p.talk-text:last-child {
margin-bottom: 0px;
}

/* 回り込み解除 */
.talk:after,.talk:before {
clear: both;
content: "";
display: block;
}

/* ----- 右の場合 ----- */

/* 右画像 */
.talk-Rimg {
margin-right: 4px;
margin-top: -1px;
float: right;
width: 80px;
height: 80px;
}

/* 右からの吹き出しテキスト */
.talk-Rtxt {
position: relative;
margin-right: 110px;
padding: 1.2em 1.3em;
/*border: 3px solid #9ce191;*/
background-color: #f5f5ff;
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
border-radius: 5px;
}

/* 右の三角形を作る */
.talk-Rtxt:before {
position: absolute;
content: '';
border: 23px solid transparent;
border-left: 23px solid #f5f5ff;
/*filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));*/
top: 15px;
right: 0;
}


.talk-Rtxt:after {
position: absolute;
content: '';
border: 23px solid transparent;
border-right: 23px solid #f5f5ff;
filter: drop-shadow(2px 2px -5px rgba(0,0,0,0.2));
top: 10px;
right: 0px;
}


.talk-Rtxt:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #f5f5ff;
filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.2));
top: 15px;
right: -19px;
}

/* ----- 左の場合 ----- */

/* 左画像 */
.talk-Limg {
margin-left: 4px;
margin-top: -1px;
float: left;
width: 80px;
height: 80px;
}

/* 左からの吹き出しテキスト */
.talk-Ltxt {
color: #444;
position: relative;
margin-left: 110px;
padding: 1.2em 1.3em;
/*border: 3px solid #9ce191;*/
/*box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);*/
filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.2));
background-color: #fffff5;
border-radius: 5px;
}

/* 左の三角形を作る */
.talk-Ltxt:after {
position: absolute;
content: '';
border: 15px solid transparent;
border-left: 23px solid #fffff5;
top: 20px;
left: 0;
}

.talk-Ltxt:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #fffff5;
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
top: 20px;
left: -20px;
}

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

  .faq {
  /*  height: 900px;*/
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #fff;
    color: #000;
    text-align: left;
    text-align: center;
  }
  .faq .title {
    margin-bottom: 20px;
    font-family: sans-serif;
    font-weight: 900;
    font-weight: bold;
    font-size: 60px;
    font-size: 40px;
    color: #069EDC;
  }
  .faq .inner {
    width: 800px;
    width: 100%;
  }
  .faq .talk {
    text-align: left;
  }
  .faq h3:before {
    background:linear-gradient(transparent 60%, #ff6 60%);
  }
  .faq h3 {
    padding-top: 10px;
    padding-bottom: 1rem;
    font-size: 1.5rem;
    color: #000;
    line-height: 1.5;
  }
  .adwrapper {
    display: flex;
  }
  .aditem {
    width: 50%;
  }
  .faq .text p {
    color: #000;
    line-height: 1.5;
  }




  /* ----- 共通 ----- */

  .talk {
  margin-bottom: 40px;
  }

  .talk figure img {
  width: 100%;
  height: 100%;
  /*border: 2px solid #9ce191;*/
  /*border: 2px solid #fff;*/
  /*filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));*/
  border-radius: 50%;
  margin: 0;
  background-color: #fff;
  }
  .talk figure.talk-Rimg img {
    background-color: #5AC2DF;
  }
  .talk figure.talk-Limg img {
    background-color: #FEBE0F;
    background-color: #FABE00;
  }
  .answericon {

  }



  p.talk-text {
  margin: 0 0 1rem;
  line-height: 1.3;
  font-size: 14px;
  }

  p.talk-text.bold {
  font-weight: bold;
  }

  p.talk-text:last-child {
  margin-bottom: 0px;
  }

  /* 回り込み解除 */
  .talk:after,.talk:before {
  clear: both;
  content: "";
  display: block;
  }

  /* ----- 右の場合 ----- */

  /* 右画像 */
  .talk-Rimg {
  margin-right: 4px;
  margin-top: -1px;
  float: right;
  width: 50px;
  height: 50px;
  }

  /* 右からの吹き出しテキスト */
  .talk-Rtxt {
  position: relative;
  margin-right: 110px;
  margin-right: 75px;
  padding: 1.5em 1.4em;
  /*border: 3px solid #9ce191;*/
  background-color: #f5f5ff;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
  border-radius: 5px;
  text-align: justify;
  }

  /* 右の三角形を作る */
  .talk-Rtxt:before {
  position: absolute;
  content: '';
  border: 23px solid transparent;
  border-left: 23px solid #f5f5ff;
  /*filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));*/
  top: 15px;
  right: 0;
  }


  .talk-Rtxt:after {
  position: absolute;
  content: '';
  border: 23px solid transparent;
  border-right: 23px solid #f5f5ff;
  filter: drop-shadow(2px 2px -5px rgba(0,0,0,0.2));
  top: 10px;
  right: 0px;
  }


  .talk-Rtxt:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #f5f5ff;
  filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.2));
  top: 15px;
  right: -19px;
  }

  /* ----- 左の場合 ----- */

  /* 左画像 */
  .talk-Limg {
  margin-left: 4px;
  margin-top: -1px;
  float: left;
  width: 50px;
  height: 50px;
  }

  /* 左からの吹き出しテキスト */
  .talk-Ltxt {
  color: #444;
  position: relative;
  margin-left: 110px;
  margin-left: 75px;
  padding: 1.2em 1.3em;
  padding: 1.5em 1.4em;
  /*border: 3px solid #9ce191;*/
  /*box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);*/
  filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.2));
  background-color: #fffff5;
  border-radius: 5px;
  text-align: justify;
  }

  /* 左の三角形を作る */
  .talk-Ltxt:after {
  position: absolute;
  content: '';
  border: 15px solid transparent;
  border-left: 23px solid #fffff5;
  top: 20px;
  left: 0;
  }

  .talk-Ltxt:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #fffff5;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
  top: 20px;
  left: -20px;
  }

}



/******************************************************************
contact
******************************************************************/
.contact {
/*  height: 900px;*/
  padding-top: 100px;
  padding-bottom: 400px;
  background-color: #f5f5ff;
  color: #000;
  text-align: left;
  text-align: center;
  background: #eff no-repeat center bottom url("../img/green.png");
  background-size: contain;
}
.contact .title {
/*  margin-bottom: 20px;*/
  font-family: sans-serif;
  font-weight: 900;
  font-weight: bold;
  font-size: 60px;
  color: #069EDC;
  line-height: 1.5;
}
.contact .lead {
  margin-bottom: 20px;
}
.contact h3:before {
  background:linear-gradient(transparent 60%, #ff6 60%);
}
.contact h3 {
  padding-top: 10px;
  padding-bottom: 1rem;
  font-size: 1.5rem;
  color: #000;
  line-height: 1.5;
}
.contact img.list {
  width: 250px;
}
.contact img.logomini {
  width: 300px;
  padding: 37px 0;
}
.adwrapper {
  display: flex;
}
.aditem {
  width: 50%;
}
.contact .text p {
  color: #000;
  line-height: 1.5;
}

.contact dl {
  margin-bottom: 30px;
}
.contact dt {
  font-weight: bold;
  padding-bottom: 10px;
}
.contact a {
  color: #00f;
  text-decoration: underline;
}


@media screen and (max-width:736px){
  .contact {
  /*  height: 900px;*/
    padding-top: 80px;
    padding-bottom: 150px;
    background-color: #f5f5ff;
    color: #000;
    text-align: left;
    text-align: center;
    background: #eff no-repeat center bottom url("../img/green.png");
    background-size: contain;
  }
  .contact .title {
  /*  margin-bottom: 20px;*/
    font-family: sans-serif;
    font-weight: 900;
    font-weight: bold;
    font-size: 60px;
    font-size: 36px;
    color: #069EDC;
    line-height: 1.5;
  }
  .contact .lead {
    margin-bottom: 20px;
  }
  .contact h3:before {
    background:linear-gradient(transparent 60%, #ff6 60%);
  }
  .contact h3 {
    padding-top: 10px;
    padding-bottom: 1rem;
    font-size: 1.5rem;
    color: #000;
    line-height: 1.5;
  }
  .contact img.list {
    width: 250px;
  }
  .contact img.logomini {
    width: 300px;
    padding: 37px 0;
  }
  .adwrapper {
    display: flex;
  }
  .aditem {
    width: 50%;
  }
  .contact .text p {
    color: #000;
    line-height: 1.5;
  }

  .contact dl {
    margin-bottom: 30px;
  }
  .contact dt {
    font-weight: bold;
    padding-bottom: 10px;
  }
  .contact a {
    color: #00f;
    text-decoration: underline;
  }

}


/******************************************************************
footer
******************************************************************/
.footer {
  background-color: #753;
  text-align: center;
  color: #fff;
}
.footer__address {
  font-style: normal;
}
.footer__nav {
  font-size: 13px;
  margin-bottom: 30px;
}
.footer__nav li {
  display: inline-block;
  list-style: none;
  border-right: 1px solid #999;
  padding: 0 20px;
}
.footer__nav li.last {
  border: none;
}
.footer__nav a {
  color: #fff;
}
.footer__nav aa:hover {
  text-decoration: underline;
}

.footer__inner {
  max-width: 1100px;
  margin-right: auto;
  margin-left: auto;
  padding: 2rem;
}
.footer__logo {
  margin-bottom: 1rem;
}
.footer__logo img {
  max-width: 400px;
}
.footer__address {
  display: inline-block;
  font-size: 0.75rem;
  text-align: left;
  font-size: 70%;
}
.footer__copy {
  font-size: 0.75rem;
}

@media screen and (max-width:736px){
  .footer {
    background-color: #753;
    text-align: center;
    color: #fff;
  }
  .footer__address {
    font-style: normal;
  }
  .footer__nav {
    font-size: 13px;
    margin-bottom: 30px;
  }
  .footer__nav li {
    display: block;
    list-style: none;
    border-right: none;
    border-bottom: 1px dotted #999;
    padding: 15px 0;
  }
  .footer__nav li.last {
    border: none;
  }
  .footer__nav a {
    color: #fff;
  }
  .footer__nav a:hover {
    text-decoration: underline;
  }

  .footer__inner {
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
    padding: 2rem;
  }
  .footer__logo {
    margin-bottom: 1rem;
  }
  .footer__logo img {
    max-width: 400px;
  }
  .footer__address {
    display: inline-block;
    font-size: 0.75rem;
    text-align: left;
    font-size: 70%;
  }
  .footer__copy {
    font-size: 0.75rem;
  }

}













/******************************************************************
下層ページ
******************************************************************/
body.page .header__inner {
  width: 1000px;
  display: flex;
  margin: 0 auto;
  padding: 20px 0 20px;
}
body.page .header img {
  width: 170px;
}
body.page .header {
  height: 120px;
  border-bottom: 1px solid #ddd;
}
body.page .header {}
body.page .header__inner .gnav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 20px 0 0 100px;
  padding: 0;
  width: 730px;
}
body.page .header__inner .gnav li {

}

@media screen and (max-width:736px){
  body.page .header__inner {
/*    width: 1000px;*/
    width: 100%;
    display: flex;
    margin: 0 auto;
    padding: 10px 0 0px;
  }
  body.page .header img {
    width: 120px;
    margin-left: 20px;
  }
  .page {
    position: relative;
  }
  body.page .header__inner {
/*    width: 1000px;*/
    display: flex;
    margin: 0 auto;
    padding: 15px 0 20px;
  }
  body.page .header img {
    width: 100px;
  }
  body.page .header {
    height: 70px;
    border-bottom: 1px solid #ddd;
    position: fixed;
    background-color: #fff;
    z-index: 1;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  }
  body.page .header {}
  body.page .header__inner .gnav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 20px 0 0 100px;
    padding: 0;
  }
  body.page .header__inner .gnav li {

  }
}





.pagename {
  width: 100%;
  height: 150px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  color: #000;
}
.pagename__inner {
  width: 1000px;
  margin: 0 auto;
}
.pagename h2 {
  text-align: left;
/*  text-align: center;*/
  padding-top: 50px;
}


@media screen and (max-width:736px){
  .pagename {
    width: 100%;
    height: 140px;
/*    height: 80px;*/
/*    padding-top: 80px;*/
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    color: #000;
  }
  .pagename__inner {
    width: 1000px;
    width: 100%;
    margin: 0 auto;
  }
  .pagename h2 {
    text-align: left;
  /*  text-align: center;*/
    padding-top: 90px;
    font-size: 16px;
    padding-left: 20px;
  }
}


.page article {
  padding: 50px 0 100px;
}
.pageTitle {
  font-size: 50px;
  line-height: 1.1;
  margin-bottom: 2rem;
  color: #069EDC; 
}
.pageLead {
  margin-bottom: 50px;
}
@media screen and (max-width:736px){
  .pageTitle {
    font-size: 30px;
    color: #069EDC;
    margin-bottom: 1.5rem;
  }
  .pageLead {
    margin-bottom: 50px;
  }
  .pageLead p {
    font-size: 13px;
    line-height: 1.3;
    text-align: left;
    margin-bottom: 10px;
  }
}

.page .midashi {
  font-size: 30px;
  padding-top: 30px;
  padding-bottom: 10px;
  line-height: 1.3;
  text-align: left;
}
.page ul.list {
  text-align: left;
/*  margin-left: 1.2rem;*/
  margin-bottom: 10px;
}
.page .text {
  margin: 0 auto;
  text-align: justify;
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: 1rem;
}
.page .text li {
  list-style: disc;
}


@media screen and (max-width:736px){
  .page .midashi {
    font-size: 20px;
    padding-top: 30px;
    padding-bottom: 10px;
  }
  .page .text {
    margin: 0 auto;
    text-align: justify;
    font-size: 13px;
    line-height: 1.5;
    padding-bottom: 1rem;
  }
}


.eventpage { 
  padding: 50px 0 100px;
/*  text-align: left;*/
}

.eventpage h2 {
  font-size: 50px;
  color: #069EDC;
}



.noticepage .lead {
/*  font-size: 16px;*/
}


.eventpage .text {
/*  width: 1000px;*/
  margin: 0 auto;
  text-align: justify;
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: 1rem;
}
.noticepage ul.list,
.dlpage ul.list {
  text-align: left;
  margin-left: 1.2rem;
  margin-bottom: 10px;
}
.privacypolicy .text li,
.noticepage .text li, 
.dlpage .text li {
  list-style: disc;
}

.noticepage .lead,
.dlpage .lead {
/*  text-align: left;*/
  width: 800px;
  margin: 0 auto;
}

.noticepage ol.list,
.dlpage ol.list {
  text-align: left;
  margin-left: 1.5em;
  margin-bottom: 1rem;
}


ol.list.parentheses > li {
  list-style: none;
  counter-increment: cnt;
  margin-left: -2em;
  padding-left: 3em;
}
ol.list.parentheses > li:before {
  content: "(" counter(cnt) ") ";
  margin-left: -2em;
}



.dlpage h4 {
  font-size: 18px;
  text-align: left;
  margin-top: 1em;
  margin-bottom: 5px;
}

.dlpage .logo-dl {
  margin-top: 50px;
  text-align: center;
}
.dlpage .logo-dl p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 1em;
}
.dlpage .logo-dl img {
  margin-top: 30px;
  width: 300px;
  margin-bottom: 30px;
}
.dlpage .logo-dl a {
  color: #00f;
}

@media screen and (max-width:736px){
  .dlpage .logo-dl p {
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 1em;
  }
  .dlpage .logo-dl img {
    margin-top: 15px;
    width: 200px;
    margin-bottom: 15px;
  }
}




/* --------------------------------------------------------------------------------------
オーダーフォーム
--------------------------------------------------------------------------------------- */
#orderFormWrapper {
  width: 100%;
  background:#F3EBF1;
  background:#fff;
  padding: 0;
  position: relative;
  z-index: 20;
  box-sizing: border-box;
}
#orderForm {
  padding: 0px 0 20px;
  margin: 0px auto 20px;
  text-align: center;
  width: 1000px;
}
#orderForm h3 {
  background: #F9B56A;
  color: #FFF;
  padding: 10px 0;
  font-size: 21px;
  font-weight: bold;
  margin: 30px 0 10px;
}

/* ----- 支払い方法 ----- */
label.radiobtn {
  display: block;
  background: #FFF;
  width: 90%;
  border: 3px solid #CCC;
  border-radius: 10px;
  margin: 10px auto;
}
#btn-A img{
  width: 100%;
}
.radiobtn input[type="radio"]{
/*  opacity: 0;*/
/*  position: absolute;*/
}
#btn-A:hover, label:hover {
/*  border: 3px solid #555;
  opacity: 0.7;*/
}
label.checked {
/*  border: 3px solid #09C;
  background: #EEF;
  opacity: 1;*/
}
.err_container {
  margin: 0 20px;
}



/* ----- お申込者様情報 ----- */
#customerInfo {
/*  width: 95%;*/
  text-align: center;
  font-size: 20px;
  margin: 0 auto 20px;
}
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"], textarea {
/*  height: 48px;
  font-size: 24px;
  margin: 5px auto;
  width: 90%;
  padding: 10px;
  border: #ccc solid 1px;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,.2)*/
}
textarea{
  height: auto;
}
.info_section {
  border-radius: 5px;
  border-top: 1px solid #ddd;
  background: #ddd;
  background: #f0f0f0;
/*  background: #fff;*/
  padding: 5px;
  margin: 10px auto;
/*  display: flex;*/
}
.info_header{
  text-align: left;
  margin: 5px 0 0 10px;
  font-size: 16px;
/*  flex-basis: 300px;*/
}
.required{
  content: "必須";
  display: inline-block;
  margin-left: 5px;
  padding: 2px 5px;
  background: red;
  border-radius: 3px;
  color: #fff;
  font-size: 86%;
  font-weight: 400;
  line-height: 1;
}
#postcode {
  text-align: left;
  margin-left: 10px;
}
#postcode1 { width: 20%; }
#postcode2{ width: 30%; }
#prefecture {
  height: 56px;
  font-size: 24px;
  width: 40%;
  margin: 5px auto;
  background: #efefef;
}
#address1{
  background: #efefef;
}
#deliverytime{
  height: 56px;
  font-size: 24px;
  width: 95%;
  margin: 5px auto;
  background: #fff;
}

.submit {
  background: #004DF5;
  color: #FFF;
  border-radius: 4px;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
  text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
  border: 1px solid #0099CC;
  font-size: 24px;
  padding: 10px 50px;
/*  width: 90%;*/
  transition: all 0.2s linear 0s;
}

.submit:hover {
  opacity: 0.7;
}





.page input,
.page textarea,
.page select {
/*  background: #f0f0f0;*/
/*  padding: 10px;*/
  border-radius: 3px;
  border: 1px solid #ccc;
/*    height: 48px;*/
  font-size: 24px;
  margin: 5px auto;
/*  width: 90%;*/
  padding: 5px 15px;
  border: #ccc solid 1px;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,.2);
  box-sizing: border-box;
}
*:disabled {
    background: #f0f0f0;
    color: linen;
    opacity: 0;
}

.page input::placeholder {
  color: #999;
}
.page form {
  padding-top: 50px;
}

.page input[type=text],
.page input[type=email],
.page textarea {
  width: 100%;
}

.formTable {
  width: 100%;
/*  background-color: #eee;*/
/*  padding: 30px;*/
/*  border-radius: 10px;*/
  border-spacing: 0px;
  margin-bottom: 30px;
}


.page input[type=radio] {
  transform: scale(1.3);
  margin-right: 10px;
  background-color: #fff;
  box-shadow: none;
}
.radio {
  margin-right: 2rem;
}

.formTable th {
  text-align: left;
  font-size: 16px;
  width: 300px;
  padding: 1rem 0;
  border-top: 1px solid #ccc;
  font-weight: normal;
}
.formTable td {
  padding: 1rem 0;
  border-top: 1px solid #ccc;
  text-align: left;
  position: relative;
}

.formTable th.last,
.formTable td.last {
  border-bottom: 1px solid #ccc;
}

.formTable tr {
/*  background-color: #fff;*/
  border-bottom: 1px solid #ccc;
  margin-bottom: 2px;
}

#postcode {
  width: 180px;
}



.formTable th {
  width: 300px;
  padding-right: 20px;
  line-height: 1;
}
.formTable th p {
  font-size: 18px;
}
.formTable th.tight {
  width: 150px;
}
.formTable th span {
  padding: 3px;
  font-size: 12px;
  line-height: 1;
}




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


  /* ----- 支払い方法 ----- */
  label.radiobtn {
    display: block;
    background: #FFF;
    width: 90%;
    border: 3px solid #CCC;
    border-radius: 10px;
    margin: 10px auto;
  }
  #btn-A img{
    width: 100%;
  }
  .radiobtn input[type="radio"]{
  /*  opacity: 0;*/
  /*  position: absolute;*/
  }
  #btn-A:hover, label:hover {
  /*  border: 3px solid #555;
    opacity: 0.7;*/
  }
  label.checked {
  /*  border: 3px solid #09C;
    background: #EEF;
    opacity: 1;*/
  }
  .err_container {
    margin: 0 20px;
  }



  /* ----- お申込者様情報 ----- */
  #customerInfo {
  /*  width: 95%;*/
    text-align: center;
    font-size: 20px;
    margin: 0 auto 20px;
  }
  input[type="text"],
  input[type="number"],
  input[type="tel"],
  input[type="email"], textarea {
  /*  height: 48px;
    font-size: 24px;
    margin: 5px auto;
    width: 90%;
    padding: 10px;
    border: #ccc solid 1px;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,.2)*/
  }
  textarea{
    height: auto;
  }
  .info_section {
    border-radius: 5px;
    border-top: 1px solid #ddd;
    background: #ddd;
    background: #f0f0f0;
  /*  background: #fff;*/
    padding: 5px;
    margin: 10px auto;
  /*  display: flex;*/
  }
  .info_header{
    text-align: left;
    margin: 5px 0 0 10px;
    font-size: 16px;
  /*  flex-basis: 300px;*/
  }
  .required{
    content: "必須";
    display: inline-block;
    margin-left: 5px;
    padding: 2px 5px;
    background: red;
    border-radius: 3px;
    color: #fff;
    font-size: 86%;
    font-weight: 400;
    line-height: 1;
  }
  #postcode {
    text-align: left;
    margin-left: 10px;
  }
  #postcode1 { width: 20%; }
  #postcode2{ width: 30%; }
  #prefecture {
    height: 56px;
    font-size: 24px;
    width: 40%;
    margin: 5px auto;
    background: #efefef;
  }
  #address1{
    background: #efefef;
  }
  #deliverytime{
    height: 56px;
    font-size: 24px;
    width: 95%;
    margin: 5px auto;
    background: #fff;
  }

  .submit {
    background: #004DF5;
    color: #FFF;
    border-radius: 4px;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
    text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
    border: 1px solid #0099CC;
    font-size: 24px;
    padding: 10px 50px;
  /*  width: 90%;*/
    transition: all 0.2s linear 0s;
  }

  .submit:hover {
    opacity: 0.7;
  }



  .page input,
  .page textarea,
  .page select {
  /*  background: #f0f0f0;*/
  /*  padding: 10px;*/
    border-radius: 3px;
    border: 1px solid #ccc;
  /*    height: 48px;*/
    font-size: 24px;
    font-size: 16px;
    margin: 5px auto;
/*    width: 90%;*/
    padding: 5px 10px;
    border: #ccc solid 1px;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,.2);
  }
  *:disabled {
      background: #f0f0f0;
      color: linen;
      opacity: 0;
  }

  .page input::placeholder {
    color: #999;
  }
  .page form {
    padding-top: 50px;
  }

  .page input[type=text],
  .page input[type=email],
  .page input[type="file"],
  .page textarea {
    width: 100%;
  }

  .formTable {
    width: 100%;
  /*  background-color: #eee;*/
  /*  padding: 30px;*/
  /*  border-radius: 10px;*/
    border-spacing: 0px;
    margin-bottom: 30px;
  }


  .page input[type=radio] {
    transform: scale(1.3);
    margin-right: 10px;
    background-color: #fff;
    box-shadow: none;
  }
  .radio {
    margin-right: 2rem;
  }

  .formTable th {
    text-align: left;
    font-size: 16px;
    font-size: 14px;
    width: 300px;
    padding: 5px 0 0;
    border-top: 1px solid #ccc;
    border: none;
    font-weight: normal;

    display: block;
    width: 100%;
  }
  .formTable td {
    padding: 1rem 0;
    padding: 5px 0;
    margin-bottom: 1rem;
    border-top: 1px solid #ccc;
    border: none;
    text-align: left;
    position: relative;

    font-size: 13px;
    display: block;
    width: 100%;
  }

  .formTable th.last,
  .formTable td.last {
    border-bottom: 1px solid #ccc;
    border: none;
  }

  .formTable tr {
  /*  background-color: #fff;*/
    border-bottom: 1px solid #ccc;
    margin-bottom: 2px;
  }

  #postcode {
    width: 180px;
  }


  .formTable th {
    width: 300px;
    width: auto;
/*    padding-right: 20px;*/
    padding-right: 0px;
    line-height: 1;
  }
  .formTable th p {
    font-size: 18px;
    font-size: 14px;
  }
  .formTable th.tight {
    width: 150px;
    width: 100%;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center;
    padding: 0;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .formTable th span {
    padding: 3px;
    font-size: 12px;
    line-height: 1;
  }


}








.search-box_label {
  font-weight: bold;
}
.is-hide {
  display: none !important;
}






.registerlist .list {
  margin-top: 50px;
/*  border-bottom: 1px solid #ccc;*/
  display: flex;
  display: block;
/*  flex-wrap: wrap;*/
  text-align: left;
}
 
.registerlist .list li.list_item {
/*  width: 49%;*/
  margin-right: 1%;
  list-style:none;
  padding: 15px 0;
  border: 1px solid #ccc;
  position: relative;
  transition: all 0.5s;
  margin-bottom: 20px;
}
.list_item:before {
  height: 25px;
  width: 25px;
  background: white;
  position: absolute;
  content: '';
}
.list_item:before {
  top: 0;
  left: 0;
  border-right: 1px solid #ccc;
  transform: rotate(50deg) translate(-72%);
}

 
.list li.list_item:nth-child(even){
 margin-right: 0;
}
 

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


.list_item button {
  display: flex;
/*  justify-content: space-between;*/
  align-items: center;
}

.thumbnail img {
  width: 100px;
  border: 1px solid #ccc;
}

.search-box-wrapper {
  display: flex;
  justify-content: center;
}

.search-box {
  width: 32%;
/*  width: 100%;*/
}
.search-box select {
  width: 95%;
  background-color: #fff;
  font-size: 20px;
  padding: 0px;
}
.search-box select option{
  padding: 2px 10px;
}
.list_item {
  width: 100%;
  line-height: 1.2;
}
.companyname {
  font-weight: bold;
  font-size: 28px;
  color: #000;
}
.list_item .pref {
  font-size: 14px;
  width: 70px;
  line-height: 1;
  padding-top: 5px;
  flex-basis: 70px;
  color: #000;
}
.list_item div {
  align-items: center;
}
.kind {
  color: #fff;
  text-align: left;
  line-height: 1;
  padding: 5px;
  margin-bottom: 10px;
  border-radius: 5px;
  font-size: 13px;
  display: inline-block;
/*  flex-basis: 100px;*/
}
.kind.kind1 {
  background-color: #069EDC;
}
.kind.kind2{
  background-color: #E4A700;
}
.kind.kind3 {
  background-color: #00C742;
}


.companyinfo {
  display: flex;
  text-align: left;
}
.companyinfo-detail {
  width: 560px;
}

.search-box h3 {
  font-size: 1.5rem;
}


.list_item:hover {
  background-color: #ffe;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.2);
}
.list button {
  width: 100%;
}

.companyinfo {
  text-align: left;
  margin-left: 20px;
/*  width: 560px;*/
}
.companyaddress {
  font-size: 0.85em;
  text-align: left;
  padding-top: 5px;
  color: #000;
}
.goalicons {
  margin-right: 10px;
  width: 230px;
/*  background-color: #fef;*/
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
}
.goalicons ul{
  text-align: right;
/*  display: flex;*/
/*  justify-content: flex-end;*/
/*  align-content: space-around;*/
}
.goalicons li {
/*  padding: 5px;*/
  list-style: none;
  display: inline-block;
}
.goalicons li img {
  width: 50px;
  height: 50px;
}






@media screen and (max-width:736px){
  .registerlist .list {
    margin-top: 50px;
  /*  border-bottom: 1px solid #ccc;*/
    display: flex;
    display: block;
  /*  flex-wrap: wrap;*/
    text-align: left;
  }
   
  .registerlist .list li.list_item {
  /*  width: 49%;*/
    margin-right: 1%;
    list-style:none;
    padding: 15px 0 5px;
    border: 1px solid #ccc;
    position: relative;
    transition: all 0.5s;
    margin-bottom: 20px;
  }
  .list_item:before {
    height: 25px;
    width: 25px;
    background: white;
    position: absolute;
    content: '';
  }
  .list_item:before {
    top: 0;
    left: 0;
    border-right: 1px solid #ccc;
    transform: rotate(50deg) translate(-72%);
  }

   
  .list li.list_item:nth-child(even){
   margin-right: 0;
  }
   

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


  .list_item button {
    display: flex;
  /*  justify-content: space-between;*/
    align-items: center;
  }

  .thumbnail img {
    width: 70px;
    border: 1px solid #ccc;
    margin-left: 20px;
  }

  .search-box-wrapper {
    display: flex;
    justify-content: center;
  }

  .search-box {
    width: 50%;
  /*  width: 100%;*/
  }

  .search-box {
    width: 50%;
  /*  width: 100%;*/
  }
  .search-box.search2{
    width: 60%;
  }
  .search-box.search3{
    width: 40%;
  }
  .search-box select {
    width: 95%;
    background-color: #fff;
    font-size: 13px;
    padding: 0px;
  }
  .search-box select option{
    padding: 2px 10px;
  }
  .search-box h3 {
/*    font-size: 1.5rem;*/
    font-size: 1rem;
  }
  .list_item {
    width: 100%;
    line-height: 1.2;
  }
  .companyname {
    font-weight: bold;
    font-size: 20px;
    color: #000;
  }
  .list_item .pref {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 13px;
    width: auto;
    line-height: 1;
    padding-top: 5px;
    flex-basis: 70px;
    color: #000;
  }
  .list_item div {
    align-items: center;
  }
  .kind {
    color: #fff;
    text-align: left;
    line-height: 1;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 5px;
    font-size: 11px;
    display: inline-block;
  /*  flex-basis: 100px;*/
  }
  .kind.kind1 {
    background-color: #069EDC;
  }
  .kind.kind2{
    background-color: #E4A700;
  }
  .kind.kind3 {
    background-color: #00C742;
  }


  .companyinfo {
    display: block;
    text-align: left;
    margin-left: 20px;
    width: 100%;
  }

  .companyinfo-detail {
    width: 560px;
    width: 100%;
    padding-right: 10px;
  }



  .list_item:hover {
    background-color: #ffe;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.2);
  }
  .list button {
    width: 100%;
  }

  .companyaddress {
    font-size: 0.85em;
    text-align: left;
    padding-top: 5px;
    color: #000;
  }
  .goalicons {
    margin-right: 10px;
    padding-right: 10px;
    width: 230px;
    width: 100%;
    margin-top: 15px;
  /*  background-color: #fef;*/
    display: flex;
    justify-content: flex-end;
    align-items: center;
/*    text-align: right;*/
  }
  .goalicons ul{
    text-align: right;
  /*  display: flex;*/
  /*  justify-content: flex-end;*/
  /*  align-content: space-around;*/
  }
  .goalicons li {
  /*  padding: 5px;*/
    list-style: none;
    display: inline-block;
  }
  .goalicons li img {
    width: 30px;
    height: 30px;
  }


}





.agreement {
  position: relative;
  margin-bottom: 2rem;
}
.agreement input {
  margin-right: 1rem;
  transform: scale(1.2);
}
.noticeagreement,
.privacyagreement {
  position: relative;
}
.noticeagreement a,
.privacyagreement a {
  color: #00f;
  text-decoration: underline;
  padding: 0 5px;
}

.noticeagreement {
  text-align: left;
  margin-bottom: 50px;
}
.noticeagreement .title,
.privacyagreement .title {
  font-size: 20px;
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: 10px;
}
.noticeagreement .title span,
.privacyagreement .title span {
  font-size: 12px;
  padding: 3px;
}
.noticeagreement p small,
.privacyagreement p small {
  font-weight: normal;
}

..noticeagreement p,
.privacyagreement p {
  font-size: 18px;
}
.noticeagreement input,
.privacyagreement input {
  margin-top: 10px;
  margin-left: 0.2rem;
  margin-right: 1rem;
  transform: scale(1.5);
}

.privacyagreement {
  text-align: left;
  margin-bottom: 30px;
}

th a {
  color: #00f;
  text-decoration: underline;
  padding: 0 5px;
}






/* --------------------------------------------------------------------------------------
オーダーフォーム
--------------------------------------------------------------------------------------- */

/* ----- 支払い方法 ----- */

.labels {
  display: flex;
  text-align: cter;
  font-size:0px;
/*  padding: 10px 20px;*/
/*  margin: 0 auto;*/
  width: 800px;
}
.labels label {
/*  width: 30%;*/
}

label.radiobtn {
  display: block;
  background: #FFF;
/*  width: 90%;*/
  border: 3px solid #CCC;
  border-radius: 10px;
  margin: 10px auto;

  padding: 10px;
  width: 30%;
}
label.radiobtn p {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.3;

}
.radiobtn input[type="radio"]{
  opacity: 0;
  position: absolute;
}
label.radiobtn:hover {
  border: 3px solid #555;
  border: 3px solid #09C;
  opacity: 0.8;
}
label.checked {
  border: 3px solid #09C;
  background: #EEF;
  opacity: 1;
}
.err_container {
  margin: 0 20px;
}






.registerPage h3.formtitle {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 15px 20px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 20px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
}

.registerPage h3.formtitle:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 0;
}

.registerPage h3.formtitle:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
  z-index: -1;
}



.target {
  display: inline-block;
  align-items: center;
  width: 100%;
}
.target img {
  width: 100px;
  height: 100px;
  margin: 10px;
}
.target .choice {
  display: flex;
  align-items: center;
/*  margin-bottom: 20px;*/
}
.target .choice input[type="checkbox"] {
  transform: scale(2);
  margin: 0 20px 0 10px;
}
.target .choice p {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  line-height: 1.3;
}

.submidashi {
  border-bottom: 1px dotted #555;
}
.targetDetail {
  width: 600px;
}
.target .choice textarea {
  font-size: 18px;
  line-height: 1.3;
}


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

  /* ----- 支払い方法 ----- */

  .labels {
    display: flex;
    text-align: center;
    font-size: 60px;
  /*  padding: 10px 20px;*/
  /*  margin: 0 auto;*/
    width: 800px;
    width: 100%;
    width: 100%;
/*    width: 370px;*/
/*    display: block;*/
  }
  .labels label {
  /*  width: 30%;*/
  }

  label.radiobtn {
    display: block;
    background: #FFF;
  /*  width: 90%;*/
    border: 3px solid #CCC;
    border-radius: 10px;
    margin: 10px 5px;

    padding: 10px 0;
/*    width: 30%;*/
/*    width: 100%;*/
  }
  label.radiobtn:first-child {
    margin-left: 0;
  }
  label.radiobtn:last-child {
    margin-right: 0;
  }  
  label.radiobtn p {
    font-size: 13px;
    font-weight: bold;
    line-height: 1.3;

  }
  .radiobtn input[type="radio"]{
    opacity: 0;
    position: absolute;
  }
  label.radiobtn:hover {
    border: 3px solid #555;
    border: 3px solid #09C;
    opacity: 0.8;
  }
  label.checked {
    border: 3px solid #09C;
    background: #EEF;
    opacity: 1;
  }
  .err_container {
    margin: 0 20px;
  }






  .registerPage h3.formtitle {
    position: relative;
    display: inline-block;
    margin: 1.5em 0;
    padding: 15px 20px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 20px;
    background: #FFF;
    border: solid 3px #555;
    box-sizing: border-box;
  }


  .registerPage h3.formtitle:before {
    content: "";
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-top: 12px solid #FFF;
    z-index: 0;
  }

  .registerPage h3.formtitle:after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #555;
    z-index: -1;
  }



  .target {
    display: inline-block;
    vertical-align: top;
    align-items: center;
    width: 100%;
  }
  .target img {
/*    width: 100px;*/
    width: 60px;
/*    height: 100px;*/
    height: 60px;
/*    margin: 10px;*/
    margin: 10px 0px 0;
  }
  .target .choice {
    display: flex;
    display: inline-block;
/*    align-items: center;*/
    vertical-align: middle;
    width: 100%;
    margin-bottom: 10px;
  }
  .target .choice input[type="checkbox"] {
    transform: scale(2);
    margin: 0 20px 0px 10px;
  }
  .target .choice p {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    line-height: 1.3;
  }

  .submidashi {
    border-bottom: 1px dotted #555;
  }
  .targetDetail {
/*    width: 600px;*/
    width: 100%;
  }
  .target .choice textarea {
    font-size: 14px;
    line-height: 1.3;
  }


}









/* --------------------------------------------------------------------------------------
運営情報ページ
--------------------------------------------------------------------------------------- */
.infopage img {
  width: 500px;
}
.infopage .address {
/*  width: 100%;*/
/*  text-align: left;*/
  padding-top: 30px;
}

.infopage .shashoku {
  width: 610px;
  margin: 100px auto 0;
  text-align: justify;
}
.infopage .shashoku h3 {
  text-align: center;
  padding-bottom: 1.5rem;
}
.infopage .shashoku h3 img {
  width: 300px;
}
.infopage .shashoku p {
  font-size: 16px;
  line-height: 1.7;
  padding-bottom: 1rem;
}

@media screen and (max-width:736px){
  .infopage img {
    width: 500px;
    width: 100%;
  }
  .infopage .address {
  /*  width: 100%;*/
  /*  text-align: left;*/
    padding-top: 30px;
  }

  .infopage .shashoku {
    width: 610px;
    width: 100%;
    margin: 100px auto 0;
    text-align: justify;
  }
  .infopage .shashoku h3 {
    text-align: center;
    padding-bottom: 1.5rem;
  }
  .infopage .shashoku h3 img {
    width: 250px;
  }
  .infopage .shashoku p {
    font-size: 14px;
    line-height: 1.7;
    padding-bottom: 1rem;
  }
}





.arrow-button {
  position: relative;
}
.btn-arrow{
    /* ボタンのCSS */
    width: 240px;
    height: 40px;
    border-radius: 9% / 50%;
    background: #3FAF49;
    color: #fff;
    position: relative;
    padding-right: 10px;
}
.btn-arrow:after {
    /* 擬似要素で三角アイコンをつくる */
    content: '';
    display: inline-block;
    border-style: solid;
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent #fff;
    display: inline-block;
    width: 0;
    height: 0;
    /* 矢印アイコンの位置を設定 */
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%); /* translateYのみ */
}


.declaration a:active{
    /* ボタンをクリックしたときに沈むように見える動き */
    box-shadow: 0 0 0 #C62828;
}







/* --------------------------------------------------------------------------------------
イベントページ
--------------------------------------------------------------------------------------- */

.eventpage h2 {
  line-height: 1.3;
}
.eventpage h2 span {
  font-size: 0.6em;
}
.eventpage .lead {
  width: 800px;
  margin: 20px auto;
}
.eventpage .lead p {
  text-align: justify;
  line-height: 1.75;
  font-size: 16px;
  margin-bottom: 1.5rem;
}


.event-title {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin: 100px 0 20px;
  padding: 10px 0;
}
.event-detail {
  text-align: left;
  border: 1px solid #333;
  border-collapse: separate;
  border-spacing: 0px;
}
.event-detail th {
  background-color: #f0f0f0;
  line-height: 1.3;
  width: 150px;
  vertical-align: top;
  padding: 20px;
  border-bottom: 1px solid #000;
  font-size: 16px;
}
.event-detail td {
  vertical-align: top;
  padding: 20px;
  border-bottom: 1px solid #000;
}
.event-detail td p {
  line-height: 1.3;
}

.event-detail th.last,
.event-detail td.last {
  border: none;
}
.event-detail hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  margin: 10px 0;
  border-top: 1px dotted #aaa;
}

.event-detail a {
  color: #00f;
}

.info_section {
  background-color: #eee;
  padding: 30px;
  position: relative;
}
.info_section input,
.info_section textarea,
.info_section select {
  background-color: #fff;
}
.info_section #participants {
  text-align: left;
}
.info_section h3 {
  margin-bottom: 1rem;
}
.info_section .submit {
  margin-top: 20px;
}




@media screen and (max-width:736px){
  .eventpage h2 {
    line-height: 1.3;
    font-size: 36px;
  }
  .eventpage h2 span {
    font-size: 16px;
  }
  .eventpage .lead {
/*    width: 800px;*/
    width: 100%;
    margin: 20px auto;
  }
  .eventpage .lead p {
    text-align: justify;
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 1.5rem;
  }


  .event-title {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    margin: 100px 0 20px;
    padding: 10px 0;
  }
  .event-detail {
    text-align: left;
    border: 1px solid #333;
    border-collapse: separate;
    border-spacing: 0px;
  }
  .event-detail th {
    display: block;
    background-color: #f0f0f0;
    line-height: 1.3;
/*    width: 150px;*/
    width: 100%;
    vertical-align: top;
    padding: 20px;
    border-bottom: 1px solid #000;
    font-size: 16px;
  }
  .event-detail td {
    display: block;
    width: 100%;
    vertical-align: top;
    padding: 20px;
    border-bottom: 1px solid #000;
  }
  .event-detail td p {
    line-height: 1.3;
  }

  .event-detail th.last {
    border-bottom: 1px solid #000;
  }
  .event-detail hr {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    margin: 10px 0;
    border-top: 1px dotted #aaa;
  }

  .event-detail a {
    color: #00f;
  }

  .info_section {
    background-color: #eee;
    padding: 10px;
    position: relative;
  }
  .info_section input,
  .info_section textarea,
  .info_section select {
    background-color: #fff;
  }
  .info_section #participants {
    text-align: left;
  }
  .info_section h3 {
    margin-bottom: 1rem;
  }
  .info_section .submit {
    margin-top: 20px;
  }

}




/*------------------------- modal -------------------------*/
.modal {
  font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
}
.modal__overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(0,0,0,0.6);
}
.modal__container {
  position: relative;
  width: 800px;
/*  max-width: 600px;*/
  max-height: 85vh;
/*  max-height: 900px;*/
  overflow-y: auto;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #fff;
}
.modal__close {
  position: sticky;
  top: 20px;
  width: 100%;
  padding-right: 20px;
  border: 0;
  background: transparent;
  text-align: right;
}
.modal__close:before { content: "\2715"; }
.modal__content {
  padding: 20px 50px 100px;
  padding: 0;
  color: rgba(0,0,0,.8);
  line-height: 1.3;
  text-align: left;
}
.modal__title {
  padding: 70px 20px 10px;
}
.modal__title__lecture {
  padding-bottom: 10px;
  box-sizing: border-box;
  color: #333;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.1;
  font-family: serif;
  text-align: center;
}
.modal__title__lecture span {
  font-weight: 100;
}
.modal__title__prof {
  font-size: 16px;
  text-align: center;
}
.modal__paragraph {
  margin: 20px 40px;
  box-sizing: border-box;
}
.modal__paragraph__headline {
  margin-bottom: 20px;
  padding-left: 15px;
  border-left: 1px solid #000;
  font-weight: bold;
  font-size: 1.35em;
  line-height: 1.3;
  font-family: serif;
  letter-spacing: 0.08em;
}
.modal__paragraph__text {
  font-size: 16px;
  line-height: 1.5;
  text-align: justify;
}
.modal__paragraph__text a {
  color: #00f;
  text-decoration: underline;
}
.modal__paragraph img {
  margin-top: 1rem;
}
.modal__paragraph img.modal__paragraph__inlinephoto {
  float: right;
  width: 200px;
  margin-top: 0;
  padding-left: 20px;
}
.modal__paragraph__external .centered {
  margin: 0 auto;
  line-height: 1.3;
  text-align: center;
}
.modal__paragraph__external .centered img {
  width: 300px;
  border: 1px solid #00f;
}
.modal__paragraph__external a {
  color: #00f;
}
.modal__paragraph__external:hover {
  text-decoration: underline;
}
.modal__message {
  min-height: 20px;
  margin: 30px 40px 20px;
  padding: 20px;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
  background: #f5f5f5;
}
.modal__message h3 {
  margin-bottom: 10px;
  color: #872d7f;
  font-size: 20px;
}
.modal__message p {
  font-size: 16px;
  line-height: 1.5;
  text-align: justify;
}
.modal__profile__photo {
  width: 100%;
  margin: 30px auto -40px;
  text-align: center;
}
.modal__profile__photo h3{
  margin-bottom: 5px;
  color: #872d7f;
  font-size: 30px;
  font-family: "Times New Roman", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;
}
.modal__profile__photo img {
  width: 100px;
  border: 5px solid #fff;
  border-radius: 5%;
}
.modal__profile__text {
  margin-top: -50px;
  padding: 50px 40px 70px;
  background-color: #872d7f;
  color: #fff;
}
.modal__profile__text h3 {
  margin-bottom: 10px;
  font-size: 20px;
}
.modal__profile__text h3 span{
  padding-left: 1rem;
  font-size: 0.9rem;
}
.modal__profile__text p {
  font-size: 16px;
  line-height: 1.5;
  text-align: justify;
}
@keyframes mmfadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes mmfadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}
@keyframes mmslideIn {
  from { transform: translateY(15%); }
    to { transform: translateY(0); }
}
@keyframes mmslideOut {
    from { transform: translateY(0); }
    to { transform: translateY(-10%); }
}
.micromodal-slide {
  display: none;
}
.micromodal-slide.is-open {
  display: block;
}
.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut .3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}
@media screen and (max-width:736px){
  .modal__container {
    max-width: 90vw;
    height: 80vh;
    background-size: 120px;
  }
  .modal__close {
    top: 10px;
    padding-right: 16px;
  }
  .modal__content {
    background-size: 120px;
  }
  .modal__title {
    padding-right: 1rem;
    padding-left: 1rem;
  }  
  .modal__paragraph {
    margin: 20px 1.5rem;
    font-size: 14px;
  }
  .modal__paragraph__text {
    font-size: 14px;
  }
  .modal__paragraph__text a {
    font-size: 12px;
  }
  .modal__paragraph img {
    margin-top: 1rem;
  }
  .modal__paragraph img.modal__paragraph__inlinephoto {
    float: right;
    width: 140px;
    margin-top: 0;
    padding-left: 10px;
  }
  .modal__paragraph__external .centered {
    font-size: 0.8rem;
  }
  .modal__paragraph__external .centered img {
    width: 250px;
  }
  .modal__message {
    margin: 20px 1.5rem;
  }
  .modal__message h3 {
    font-size: 16px;
  }
  .modal__message p {
    font-size: 14px;
  }
  .modal__profile__photo img {
    width: 80px;
  }
  .modal__profile__text {
    margin-top: -40px;
    padding: 50px 1.5rem 40px;
  }
  .modal__profile__text p {
    font-size: 14px;
  }
}



.modalhead_thumb img {
  width: 180px;
  height: 180px;
  border: 1px solid #ccc;
}


/*------------------------- scroll navigation -------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap");
.scroll {
  transition: 0.5s;
}
.scroll::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
}
.scroll-down_text {
  display: inline-block;
  position: absolute;
  right: -21px;
  bottom: 145px;
  z-index: 2;
  padding: 0;
  color: #000;
  font-size: 14px;
  font-family: "Josefin Sans", sans-serif;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transform: rotateZ(-90deg);
  transition: 0.2s;
  overflow: hidden;
}
.scroll .scroll-down_arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 16px;
  width: 1px;
  height: 100px;
  background: #000;
}
.scroll .scroll-down_arrow:before {
  content: '';
  display: block;
  position: absolute;
  right: 12px;
  bottom: 1px;
  margin: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  behavior: url(-ms-transform.htc);
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}
.scroll a:hover {
  opacity: 0.5;
}
.scroll .scroll-down_arrow::after {
  animation: sdl01 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
.is-hidden {
  visibility: hidden;
  opacity: 0;
}
@media screen and (max-width:600px){
  .scroll-down_text {
    bottom: 135px;
    font-size: 12px;
  }
  .scroll .scroll-down_arrow::after {
    right: 12px;
  }
  .scroll .scroll-down_arrow:before {
    right: 9px;
  }
}




.modalhead {
  padding: 20px 50px 0;
  display: flex;
}
.modalhead_info {
  margin-left: 30px;
}
.modalhead_info .kind {
  font-size: 16px;
}
.modalhead_info .companyname {
  margin-bottom: 10px;
  font-size: 30px;
}
.modalhead_info .address {
  margin-bottom: 10px;
}
.modalhead_info .website a {
  color: #00f;
}
.modalhead_info .website a:hover {
  text-decoration: underline;
}


.goalhead {
  padding: 0 50px;
}
.goalhead_inner {
  border-top: 1px solid #ccc;
  margin-top: 30px;
/*  margin: 30px 50px 0;*/
  box-sizing: border-box;
  width: 100%;
/*  background-color: #eef;*/
  padding: 10px 0;
  color: #069EDC;
}
.goalhead p {
  padding-top: 10px;
  font-size: 20px;
  text-align: center;
/*  font-weight: bold;*/
}
.goalhead p > span {
  font-weight: normal;
}
.declaration-lists {
  padding-bottom: 80px;
  background: #fff url("../img/onepoint.png") 10px 10px no-repeat; 
  background-size: 150px;
  background-position: bottom 0px right 20px;
}
.declaration-lists ul {
  padding: 0 50px;
}
.declaration-lists li {
  list-style: none;
}

.declaration-item {
  display: flex;
  background-color: #eee;
  padding: 10px;
}
.declaration-item.goal1 { background-color: rgba(229,36,59,0.15); }
.declaration-item.goal2 { background-color: rgba(221,166,58,0.15); }
.declaration-item.goal3 { background-color: rgba(76,159,56,0.15); }
.declaration-item.goal4 { background-color: rgba(197,25,45,0.15); }
.declaration-item.goal5 { background-color: rgba(255,58,33,0.15); }
.declaration-item.goal6 { background-color: rgba(38,189,226,0.15); }
.declaration-item.goal7 { background-color: rgba(252,195,11,0.15); }
.declaration-item.goal8 { background-color: rgba(162,25,66,0.15); }
.declaration-item.goal9 { background-color: rgba(253,105,37,0.15); }
.declaration-item.goal10 { background-color: rgba(221,19,103,0.15); }
.declaration-item.goal11 { background-color: rgba(253,157,36,0.15); }
.declaration-item.goal12 { background-color: rgba(191,139,46,0.15); }
.declaration-item.goal13 { background-color: rgba(63,126,68,0.15); }
.declaration-item.goal14 { background-color: rgba(10,151,217,0.15); }
.declaration-item.goal15 { background-color: rgba(86,192,43,0.15); }
.declaration-item.goal16 { background-color: rgba(0,104,157,0.15); }
.declaration-item.goal17 { background-color: rgba(25,72,106,0.15); }

.declaration-item .icon {
  line-height: 1;
}
.declaration-item .icon img {
  width: 100px;
}
.declaration-detail {
  width: 100%;
  margin-left: 20px;
  margin-right: 10px;
}
.declaration-detail .sub {
  padding-bottom: 10px;
}
.declaration-detail .myaction {
  width: 100%;
  text-align: left;
  border: 1px solid #999;
  background-color: #fff;
  padding: 15px;
  font-size: 20px;
}
li.declaration-list {
  margin-bottom: 30px;
}



@media screen and (max-width:736px){
  .modalhead {
    padding: 20px 20px 0;
    display: flex;
    display: block;
    text-align: center;
  }
  .modalhead_thumb img {
    width: 180px;
    height: 180px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
  }

  .modalhead_info {
    margin-left: 30px;
    margin-left: 0;
  }
  .modalhead_info .kind {
    font-size: 14px;
    padding: 7px;
  }
  .modalhead_info .companyname {
    margin-bottom: 10px;
    font-size: 24px;
  }
  .modalhead_info .address {
    margin-bottom: 10px;
  }
  .modalhead_info .website a {
    color: #00f;
  }
  .modalhead_info .website a:hover {
    text-decoration: underline;
  }


  .goalhead {
    padding: 0 50px;
    padding: 0 20px;
  }
  .goalhead_inner {
    border-top: 1px solid #ccc;
    margin-top: 30px;
  /*  margin: 30px 50px 0;*/
    box-sizing: border-box;
    width: 100%;
  /*  background-color: #eef;*/
    padding: 10px 0;
    color: #069EDC;
  }
  .goalhead p {
    padding-top: 10px;
    font-size: 20px;
    text-align: center;
  /*  font-weight: bold;*/
  }
  .goalhead p > span {
    font-weight: normal;
  }
  .declaration-lists {
    padding-bottom: 70px;
    background: #fff url("../img/onepoint.png") 10px 10px no-repeat; 
    background-size: 130px;
    background-position: bottom 0px right 10px;
  }
  .declaration-lists ul {
    padding: 0 20px;
  }
  .declaration-lists li {
    list-style: none;
  }

  .declaration-item {
    display: flex;
    background-color: #eee;
    padding: 10px;
  }
  .declaration-item.goal1 { background-color: rgba(229,36,59,0.15); }
  .declaration-item.goal2 { background-color: rgba(221,166,58,0.15); }
  .declaration-item.goal3 { background-color: rgba(76,159,56,0.15); }
  .declaration-item.goal4 { background-color: rgba(197,25,45,0.15); }
  .declaration-item.goal5 { background-color: rgba(255,58,33,0.15); }
  .declaration-item.goal6 { background-color: rgba(38,189,226,0.15); }
  .declaration-item.goal7 { background-color: rgba(252,195,11,0.15); }
  .declaration-item.goal8 { background-color: rgba(162,25,66,0.15); }
  .declaration-item.goal9 { background-color: rgba(253,105,37,0.15); }
  .declaration-item.goal10 { background-color: rgba(221,19,103,0.15); }
  .declaration-item.goal11 { background-color: rgba(253,157,36,0.15); }
  .declaration-item.goal12 { background-color: rgba(191,139,46,0.15); }
  .declaration-item.goal13 { background-color: rgba(63,126,68,0.15); }
  .declaration-item.goal14 { background-color: rgba(10,151,217,0.15); }
  .declaration-item.goal15 { background-color: rgba(86,192,43,0.15); }
  .declaration-item.goal16 { background-color: rgba(0,104,157,0.15); }
  .declaration-item.goal17 { background-color: rgba(25,72,106,0.15); }

  .declaration-item .icon {
    line-height: 1;
  }
  .declaration-item .icon img {
    width: 50px;
  }
  .declaration-detail {
    width: 100%;
    margin-left: 10px;
    margin-right: 0px;
  }
  .declaration-detail .sub {
    padding-bottom: 10px;
  }
  .declaration-detail .myaction {
    width: 100%;
    text-align: left;
    border: 1px solid #999;
    background-color: #fff;
    padding: 10px;
    font-size: 14px;
  }
  li.declaration-list {
    margin-bottom: 30px;
  }

}