@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500;700;900&display=swap");

/*! normalize.css v8.0.1 */
html{line-height:1.15;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:0.5em 0;}hr{box-sizing:content-box;height:0;overflow: visible;}pre{font-family:Noto Sans JP;font-size:1em;}a{background:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small {font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub {bottom:-0.25em;}sup{top:-0.5em;}img {border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input {overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:0.35em 0.75em 0.625em;}legend{box-sizing:border-box;color:inherit;display: table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}a:-webkit-any-link {text-decoration:none !important;}
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */


/* print setting */
@media print {
  body {
    -webkit-print-color-adjust: exact;
    top: 0 !IMPORTANT;
    left: 0 !IMPORTANT;
    width: 200mm !IMPORTANT;
    height: 287mm !IMPORTANT;
  }
}

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

html {
  font-family: Noto Sans JP;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.09em;
  color: #000000;
}

body {
  max-width: 1280px;
  min-width: 375px;
  margin: auto;
  background: #ffffff;
}

header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:4px;
  background:url(Vimg/17545.jpg)no-repeat center center/100%;
}

.l-img, .r-img {width:16%;}
p {margin-block-start:0;margin-block-end: 0;}
button,input,select,textarea {font-family:inherit;font-size:inherit;line-height:inherit;}
h1,h2 {font-size:1.2em;text-align:center;}
.akaji{color:#f00;}

/* main-title */
.main-title {font-size:2em;margin-top:24px;color:#003366;}
.main-title span{padding:0 8px;color:#ff0000;border-top:1px solid #ff0000;border-bottom:1px solid #ff0000;}

/* titles */
.titles {margin:1em;text-align:center;}
.titles > h2 {font-size:1.5em;}
.titles > p > span{display:inline-block;}

/*overview*/
.caption{font-size:0.9em;width:95%;margin:8px auto;}
.flow{width:60%;margin:16px auto;text-align:center;border:0;}
.flow_rw{text-align:center;background:#5f77ff;color:#fff;}
.flow_td{padding-left:8px;text-align:left;line-height:24px;border:1px solid #5f77ff;}
.flow_sub{margin:8px auto;background:#5f77ff;font-size:1em;color:#fff;padding:3px 2px 2px 15px;}
@media (max-width:768px) {.flow{width:90%;}}
@media (max-width:375px) {.caption, .flow{width:100%;margin:8px auto;}}

/*BOOKS*/
.book_Container{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;}
.ppwb-box,.kkmc1Q,.kkmc2Q,.kkmc3Q {display:flex;flex-direction:column;margin:1em 0.5em;text-align:center;}
.ppwb-box {width:auto;}
.kkmc1Q {width:30%;background:#f3f3f3;padding-bottom:1em;}
.kkmc2Q, .kkmc3Q {width:23%;background:#f3f3f3;padding-bottom:1em;}
.Q-uno,.Q-dos,.Q-tres,.Q-gijo {padding:3px 0;font-size:1em;font-weight:700;color:#fff}
.Q-uno{background:#5cf;}
.Q-dos{background:#f59;}
.Q-tres{background:#3c9;}
.Q-gijo{background:#ccc;}
.thums img,.thums2Q {margin:1em auto 0;border:0;}
.thums img {width:100px;}
.thums2Q img {width:180px;}
.plice{font-size:1.8em;font-weight:700;margin-block-end:0;}
.tax{font-size:0.7em;margin-block-start:0;}
.det{margin:0 auto;font-size:0.75em;}
.det ul {margin-left:0em;}
.det ul li{text-align:left;padding-left:0em;}
@media (max-width:768px) {.book_Container{justify-content: space-evenly;}.ppwb-box,.kkmc2Q{width:90%;}.kkmc1Q{width:100%;}}

.btn, .btn-bk {
  display:inline-block;
  transition:all 0.2s linear;
  margin-bottom:0;
  font-weight:500;
  text-align:center;
  vertical-align:middle;
  touch-action:manipulation;
  cursor:pointer;
  white-space:nowrap;
  padding:4px 12px;
  font-size:1em;
  line-height:1.58;
  border-radius:50px;
  user-select:none;
  text-decoration: none;
}
.btn {border:1px solid #ff0060;color:#ffffff;background:#ff0060;}
.btn:hover {text-decoration:none;color:#ff0060;background:#ffffff;}
.btn-bk {border:1px solid #333;color:#000;background:#aaa;}
.btn-bk:hover {text-decoration:none;color:#000;background:#ffffff;}

/* icons */
.icons {background:#f4ad99;text-align:center;}
.icons > h2, .notice > h2, .caution > h2, .steps > h2, .inquiry > h2 {padding:0.25em 0;}
.icons > h2, .notice > h2, .caution > h2, .steps > h2 {color:#ffffff;}
.icons > h2 {background:#f98b6d;}
.feature-container,.icons-container {
  display:flex;
  justify-content:center;
  width:100%;
  padding:1em;
}
.icons-box {display:flex;gap:16px;}
.icon {
  display:flex;
  justify-content:center;
  align-items:center;
}
.icon img {
  width: 180px;
  border: 0;
  box-shadow: 0.25em 0.25em 0.25em #666;
  border-radius: 0.75em;
  transition: transform 0.3s ease;
  animation: fuwafuwa 1s ease-in-out infinite;
}
@keyframes fuwafuwa {
  0% {transform: translateY(0);}
  50% {transform: translateY(-0.25em);}
  100% {transform: translateY(0);}
}
.icon-item {position:relative;}
.icon-item img {
  width: 180px;
  border: solid 1px #999;
  box-shadow: 0.25em 0.25em 0.25em #666;
  border-radius: 0.75em;
}
.icon-image {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.3s ease;
}
.play-icon {
  position:absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
  font-size: 1.2em;
  font-weight:900;
  color:#fFF;
  background:#f74e1f;
  opacity:0;
  transition: opacity 0.3s ease;
}

@media (max-width:375px) {.icons-box {flex-direction: column;}.flex-box .icon {margin-bottom:10px;}}
@media (max-width:768px) {.icons-box {flex-direction: column;flex-wrap:wrap;}.flex-box .icon {flex: 1 0 45%;}}
@media (min-width:769px) {.icons-box {flex-wrap:nowrap;}}

/* notice, caution */
.books, .icons, .notice, .caution, .steps, .inquiry, .points{width:95%;margin:16px auto;letter-spacing:0.09em;border-radius:0.5em;}
.notice {background:#d7f4ec;}
.caution {background:#f5ccd8;}
.notice > h2 {background:#4eecbf;color:#333333;}
.caution > h2 {background:#ec4e7b;}
.steps > h2 {background:#4bb6da;}
.notice-countaina, .caution-countaina {padding:0 1em 1em;}
ul {padding-left:36px;}
li {padding: 0 1em;align-items:center;}

/* step */
.steps > h2 {margin:0;}
.steps-countaina{display:flex;flex-wrap:wrap;justify-content:space-around;padding:0.5em;background:#edf6f9;}
.step {width:20%;margin-bottom:1em;}

.step-content {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0.5em;
}
.step-number {
  font-weight:700;
  width:100%;
  height:2em;
  display:flex;
  justify-content: center;
  align-items: center;
  margin-bottom:10px;
  background:#91d2e7;
  position:relative;
  padding:3px 8px;
}
.step-number::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -15px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid #91d2e7;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}
.step-caption {height:auto;margin-bottom:0.5em;font-size:0.8em;}
.step-image {max-width:100%;height:auto;border-radius:0.5em;}

@media (max-width: 768px) {
  .steps {flex-direction:column;align-items:center;}
  .step {width:90%;margin-bottom: 30px;}
  .step-content img {width:45%;}
  .step-caption {font-size:1em;}
}

/* points */
.points {background:#ccecf5;}
.points h1 {margin:0 auto;}
.points h1 img {width:80%;max-width:20em;}
.point-container {
  display:flex;
  justify-content:center;
  align-items: stretch;
  gap:0.5em;
  width:100%;
  height:100%;
  padding:0 0.5em 1em;
  font-weight:500;
}
.point {
  display:flex;
  flex-direction:column;
  align-items:center;
  background:#a0e2f4;
  gap:0.5em;
  padding:0.5em;
  border-radius:1em;
  width:25%;
}
.point h2 {
  background:#0abef0;
  font-size:0.8em;
  color:#FFFFFF;
  padding:1em;
  border-radius:50%;
  line-height:1;
  letter-spacing:0;
}
.point h2 span {font-size:2em;}

@media (max-width:768px) {
  .point-container {flex-direction: column;justify-content:center;flex-wrap:nowrap;align-content:center;justify-content:center;}
  .point {flex-direction:row;width:100%;}
}

/* inquiry */
.inquiry {background:#ead4f2;text-align: center;font-size: 0.8em;}
.inquiry > h2 {background:#ddaced;color:#bf5fdf;margin-bottom: 0.25em;}
.inquiry-countaina {
  display:flex;
  flex-direction: column;
  justify-content:center;
  width:90%;
  max-width: 600px;
  margin:0 auto;
  padding:0.5em 0 1.5em;
}
.inquiry-countaina form {text-align: center;}
.form-control {
  width:100%;
  height:2em;
  background:#edf0f9;
  border:none;
  margin-bottom:0.25em;
  padding:0 0.35em;

}
.form-control:focus, .form-control:active {
  background:#FFFFFF;
  border:none;
}
textarea.form-control {height: inherit !important;}

button {
  background: transparent;
  color:#000000;
  border:1px solid #FFFFFF;
  border-radius:0.25em;
  padding:0.35em 2em;
  transition: background-color 0.3s;
  font-size:0.8em;
}
button:hover {color:#FFFFFF;box-shadow: 0 0 0 1px;background:#bf5fdf;}
button:active {border:none;background:#b9c5e9;}

/* footer */
footer {background-color:#222222;color:#eeeeee;padding:1em 0;text-align:center;}
footer a {text-decoration:none; color: #eeeeee;}
.footer-container {width:100%;margin:0 auto;}

.social-media {margin-bottom:1em;text-align:center;}
.social-icon {text-decoration:none;color:#eeeeee;font-size:1.5em;margin-left:0.5em;transition:color 0.5s;}
.social-icon.x-t {color:#aaa;}
.social-icon.x-t:hover {color:#FFFFFF;}
.social-icon.instagram {padding-right:2px;}
.social-icon.instagram:hover {color:#c32aa3;}
.social-icon.line,{padding-left:2px;}
.social-icon.line:hover {color:#00c300;}
.social-icon.fb:hover {color:#4267B2}

.copyright {margin-top:1em;}
.contact-info {margin:0.3em 0;}
.contact-info i {margin-right:0.25em;padding-left:3px;}
.contact-info p {font-size:0.8em;}

/* CSR Statement */
.csr-statement p {font-size:0.75em;color:#FFFFFF;margin-top:1.5em;line-height:1.5;}

@media (max-width: 768px) {
  .footer-container {padding:0 1em;}
 }
.img-responsive{margin:0.5em auto;display:block;max-width:5%;height:auto;}