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

/*! normalize.css v8.0.1 */
html{line-height:1.15;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:0.67em 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;}
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */

*,: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:#333;}
body{max-width: 1280px;min-width:375px;margin:auto;background:#fff;}
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;}
.akaji{color:#f00;}
.lemon{background:#fff352;}
.center{text-align:center;}

h2{font-size:1.2em;}
.al-L{text-align:left;}
.al-c{text-align:center;}

/*header*/
.l-img, .r-img {width:16%;}
p{margin-block-start:0;margin-block-end:0;}

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

/*titles*/
.titles {margin:1em;text-align:center;}
.main_containa{padding:8px;}
.title_box{display:flex;justify-content:center;}
.title_box img{width:50%;height:auto;display:block;}
.titles > h2 {font-size:1.5em;}
.titles > p > span{display:inline-block;}

@media (max-width:768px){.title_box img{width:100%;height:auto;display:block;max-width:80%;}}
@media (max-width:375px) {.title_box img{width:100%;height:auto;display:block;max-width:100%;}}

/*overview*/
.sub_contaoma{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) {.flow{width:100%;margin:8px auto;}}

.sample{display:flex;flex-direction:row;margin:0 auto;position:relative;width:30%;padding-top:16px;}
.sample a img{width:100%;margin:0 auto;}
.sample p{position:absolute;font-size:1em;font-weight:500;color:#F06;top:-6px;}

/*BOOKS*/
.book_Container{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-around;}
.ppwb-box {display:flex;flex-direction:column;width:30%;margin:1em auto;text-align:center;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 {width:100px;margin:16px auto 0;border:0;}
.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{width:90%;}}

.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:#fff;background:#ff0060;}
.btn:hover {text-decoration:none;color:#ff0060;background:#fff;}
.btn-bk {border:1px solid #333;color:#000;background:#aaa;}
.btn-bk:hover {text-decoration:none;color:#000;background:#fff;}

/* notice, caution */
.books, .notice, .caution, .steps, .inquiry, .points{width:95%;margin:16px auto;letter-spacing:0.09em;border-radius:0.5em;}
.notice > h2, .caution > h2, .steps > h2, .inquiry > h2 {padding:0.25em 0.75em;}
.notice > h2, .caution > h2, .steps > h2 {color:#ffffff;}

.notice {background:#d7f4ec;}
.notice > h2 {background:#4eecbf;color:#333333;}

.caution {background:#f5ccd8;}
.caution > h2 {background:#ec4e7b;}

.steps > h2 {background:#4bb6da;}

@media (max-width:768px) {.notice > h2, .caution > h2, .steps > h2 {font-size:1.25em;}}

.notice-countaina, .caution-countaina {padding:0 1em 1em;}
ul {padding-left:2em;}
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%;}
  .step-content img {width:45%;}
  .step-caption {font-size:1em;}
}

/* icons */
.feature-container,.icons-container {
  display:flex;
  justify-content:center;
  width:100%;
  padding:1em;
}
.icons-box {display:flex;gap:16px;}

.icon-item img {
  width: 180px;
  border:solid 1px #999;
  box-shadow: 0.25em 0.25em 0.25em #666;
  border-radius: 0.75em;
}

/*ad*/
.AD{margin:1em auto;text-align:center;}

/* footer */
footer {background-color:#222222;color:#eeeeee;padding:1em 0;text-align:center;}
.footer-container {width:100%;margin:0 auto;}
footer a{text-decoration: none;color: #eeeeee;}
.social-media {margin-bottom:1em;text-align:center;}
.social-icon {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;}

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



.adbunner{margin:32px auto;text-align:center;}
@media (max-width:768px) {.adbunner{width:100%;margin:8px auto;}}