@charset "utf-8";

html, body,header, p{    
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 900!important;
    line-height: .7;
    margin-bottom: 0;
}

.balloon01 {
    background-color: #fff;
    padding: 15px 0;
}
.balloon01 h1{
    display: inline-block;
    position: relative;
    width: 90%;
    background: #2A9ACE;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1.5rem;
    color: #fff;
    padding: 12px 0;
    margin: 10px 0;
    letter-spacing: 2px;
  }
  .balloon01 h1::after{
    content: "";
    position: absolute;
    margin: 0;
    bottom: -30px;
    left: 20%;
    width: 0;
    height: 0;
    border-top: 50px solid #2a9ace;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    transform: rotate(62deg);
  }

.catch {
    background-color: #fff;
    padding: 12px 0;
}

.dots {
    background-image: radial-gradient(circle at center, rgb(250, 51, 1) 20%, transparent 20%); /* 点の色とサイズ調整 */
    background-position: top right; /* 点の位置 */
    background-repeat: repeat-x; /* 横方向に繰り返し */
    background-size: 0.9em 0.5em; /* 点の間隔とサイズ調整 */
    padding-top: .2em; /* 縦方向の位置調整 */
}

header p {
    font-size: 2.5rem;
    letter-spacing: -5px;
}

.mg1{margin: 1rem 0;}
.mg2{margin: 2rem 0;}

.f1{font-size: 1rem;}
.f15{font-size: 1.5rem;}
.f2{font-size: 2rem;}
.f25{font-size: 2.5rem;}
.f275{font-size: 2.75rem;}
.f3{font-size: 3rem;}
.f35{font-size: 3.5rem;}
.f375{font-size: 3.75rem;}
.f4{font-size: 4rem;}
.f45{font-size: 4.5rem;}
.f5{font-size: 5rem;}
.f6{font-size: 6rem;}
.f7{font-size: 7rem;}

.lh15{line-height: 1.5rem;}

.fc-red{
    color: #FF0000;
    margin-top: 1.5rem;
}

.fc-rosso{
    color: #D50100;
    margin: 1.5rem 0; 
}
.fc-Astrolabe{
    color: #2a9ace;
    letter-spacing: 0px;
}
.tc{text-align: center;}

.fb{font-weight: bold;}

.lts-2{letter-spacing: -4px;}

.marker-yellow {
    background: linear-gradient(transparent 60%, #ffff33 60%);
}

.books {
    background: #FFDF02;
    border-bottom: #FFB000 solid 4px;
    font-size: 4rem;
    padding: 2rem 0;
    margin-bottom: 5rem;
    line-height: 4.5rem;
    position: relative;
}

.books span{
 font-size: 7rem;
}

.books::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    top: 96%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 80px 0 80px;
    border-color: #FFDF02 transparent transparent transparent;
}

.books::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 50px 80px 0 80px;
    border-color: #FFB000 transparent transparent transparent;
}

.uk-head1{
    font-size: 2rem;
    line-height: 1.25;
    color: #2a9ace;
    align-items: center; 
    display: flex; 
    justify-content: center; 
}
.uk-head1::before,
.uk-head1::after {
  background-color: #2a9ace; 
  border-radius: 1.5px; 
  content: "";
  height: 5px; 
  width: 70px; 
}
.uk-head1::before {
  margin-right: 5px; 
  transform: rotate(60deg); 
}
.uk-head1::after {
  margin-left: 5px; 
  transform: rotate(-60deg); 
}

.uk-head2{
    font-size: 2rem;
    line-height: 1.25;
    color: #000000;
    align-items: center; 
    display: flex; 
    justify-content: center; 
}
.uk-head2::before,
.uk-head2::after {
  background-color: #000; 
  border-radius: 1.5px; 
  content: "";
  height: 3px; 
  width: 40px; 
}
.uk-head2::before {
  margin-right: 5px; 
  transform: rotate(60deg); 
}
.uk-head2::after {
  margin-left: 5px; 
  transform: rotate(-60deg); 
}

.container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 1rem 0;
}

/* リストのスタイル */
.checkbox-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.checkbox-list li {
    display: flex;
    align-items: center;
    margin-bottom: 8px; /* アイテム間のスペース */
}

.checkbox-list img {
    margin-right: 8px; 
    width: 40px;
    height: 37px;
}

li.d01{
    font-size: 2.5rem;
}

.box1{
    background: #2a9ace;
    color: #fff;
    padding: 2rem 0;
    margin: 1rem 0;
    text-align: center;
    font-size: 3.5rem;
    line-height: 1;
}

.ntxt{
    font-weight: normal!important;
    line-height: 1.2;
}

.msg1{font-size: 2rem;}
.msg2{font-size: 4rem;}
.msg3{font-size: 2.8rem;}
.msg4{font-size: 3.5rem;}

.set1{letter-spacing: -7px;}

.recommend{
    display: flex;
    align-items: center;
}

.person-name{
    line-height: 2;
}

.reco2{
    padding:.5rem 1rem 1.2rem;
}
.icon {
    display: flex;
    align-items: center;
}

footer p{
        line-height: 1.5;
        font-weight: normal !important;

    
}

@media screen and (max-width: 767px) {
    img{
        max-width: 100%;
    }
    .balloon01 h1{
        font-size: 3.5vw;
    }

    header p {
        font-size: 6.5vw;
        margin-top: 1rem;
        letter-spacing: -2.5px;
    }

    .f1{font-size: 3.5vw;}
    .f2{font-size: 5vw;}
    .f25{font-size: 6vw;}
    .f3{font-size: 6vw;}
    .f4{font-size: 12vw;}
    .f35{font-size: 8.5vw;}
    .f375{font-size: 8.5vw;}
    .f45{font-size: 10.5vw;}
    .f5{font-size: 8vw;}
    .f6{font-size: 9vw;}
    .f7{font-size: 10vw;}

    .mg1{margin: .5rem 0;}
    .mg2{margin: 1rem 0;}

    .books {
        font-size: 10vw;
        padding: 1rem 0;
        line-height: 3.5rem;
    }

    .books span{
        font-size: 20vw;
        padding: 2rem 0;
        line-height: 4.5rem;

    }
    .uk-head1{
        font-size: 4vw;
    }

    .uk-head1::before,
    .uk-head1::after {
        background-color: #2A9ACE; 
        border-radius: 1.5px; 
        content: "";
        height: 5px; 
        width: 40px; 
    }

    .uk-head2{
        font-size: 4vw;
        margin-top: 20px;
    }
    
    .uk-head2::before,
    .uk-head2::after {
        background-color: #000; 
        border-radius: 1.5px; 
        content: "";
        height: 5px; 
        width: 40px; 
    }
.uk-head2::before {
  margin-right: 5px; 
  transform: rotate(60deg); 
}
.uk-head2::after {
  margin-left: 5px; 
  transform: rotate(-60deg); 
}

    li.d01{
        font-size: 6vw;
    }
    
    li.d02{
    font-size: 4vw;
        line-height: 1.2;
    }
    .box1{
        font-size: 7vw;

    }
    .msg1{font-size: 6vw;
    line-height: 1.2;}
    .msg2{font-size: 12vw;}
    .msg3{font-size: 7.5vw;}
    .msg4{font-size: 10.5vw;}
    .set1{    letter-spacing: 1px;}
}