@charset "UTF-8";
/* CSS Document */

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=PT+Serif&display=swap');

// <weight>: Use a value from 200 to 900
// <uniquifier>: Use a unique and descriptive class name

.noto-serif-jp-<uniquifier> {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


#top,#spec {
   font-family:YuMincho, "Yu Mincho","游明朝","游明朝体","ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
      font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    word-break: normal;
    word-wrap: break-word;
    font-feature-settings: "palt";
    letter-spacing: .1em;
}

._sp {
    display: none;
}

._pc {
    display: block;
}


@media only screen and (max-width: 468px) {	
._sp {
    display: block;
}

._pc {
    display: none;
}
}
h1, h2, h3 {
    font-weight: bold;
    text-align: center;
}

#top {
    background-color:#FFF;
    padding: 2.5% 0;
    margin:0 auto
}

#top p.anni35th {
    max-width: 250px;
    width: 90%;
    margin: 0 auto;
}
@media only screen and (max-width: 468px) {	
   #top p.anni35th {
       max-width: 150px;
}
}
#top h2.toptext {
    color: #004ea2;
    font-size: 50px;
    margin: 7px auto 20px;
}
@media only screen and (max-width: 468px) {	
   #top h2.toptext {
        font-size: 25px;
}
}
.product {
    margin: 10px auto 30px auto;
}

.product h3.productname {
    font-size: 22px;
    letter-spacing: 0.5rem;
 margin: 7px auto;
}

.product h4.productname-eng {
    text-align: center;
    font-size: 14px;
    margin: 7px auto;
    font-family: sans-serif;
}

.product p.price {
    font-weight: bold;
    text-decoration: underline;
        font-family: sans-serif;
}

#howtobuy {
    background: rgba(250, 251, 221, 0.5);
    padding: 2.5% 0;
    margin:0 auto
}

.div-inner {
    max-width: 780px;
    margin: 0 auto;
}

#howtobuy,#att  {
    position: relative;
    background: rgba(250, 251, 221, 0.5);
    padding-bottom:  2.5%;
    margin:0 auto
}
#howtobuy h2 {
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}


#howtobuy table.timetable {
    width: 100%;
    margin: 20px 0;
}

#howtobuy table.timetable th {
    background: #ededed;
}

#howtobuy table.timetable td {
    background-color: #FFF;
}

#howtobuy table.timetable th, table.timetable td {
    border: 1px solid #CCC !important;
    padding: 5px;
}
#howtobuy .btn_form {
    background: #013E65;
    color: #FFF;
    padding: 0.5em 1em;
    text-align: center;
    max-width: 400px;
    margin: 20px auto;
    font-weight: bold;
    font-size: 1.3em;
    border-radius: 8px;
}

#howtobuy .btn_form a {
    color: #FFF;
    text-decoration: none;
}

#att .div-inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 10px 40px;
    background-color: #FFF;
}

@media only screen and (max-width: 480px) {
#att .div-inner {
    padding: 10px ;
}
}

#howtobuy p {
    text-align: center;
}

#att ul li {
    list-style: none;
}

#att h3.att_ttl {
    text-align: left;
    /*padding-left: 40px;*/
}

@media only screen and (max-width: 800px) {
    .div-inner {
        width: 90%;
        margin: 0 auto;
    }
    
#att h3.att_ttl {
    padding-left: 0px;
}
}

#spec table.spectable {
    width: 100%;
    margin: 20px 0;
}

#spec table.spectable th {
    background: #ededed;
}

#spec table.spectable td {
    background-color: #FFF;
}

#spec table.spectable th, table.spectable td {
    border: 1px solid #CCC !important;
    padding: 5px;
}