@charset "utf-8";
body{
    font-size: 100%;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
.title{
    font-size: 180%;
    font-weight: bold;
    margin-bottom: 10px;
}
.title-middle{
	font-size: 150%;
    margin-bottom: 10px;
	line-height: 1.5;  
}
.title-blue{
	color: #004386;
}
.title-red{
	color: #d0121b;
}
.title-description li{
    font-size: 130%;
    line-height: 1.7;    
}
.title-description p{
    font-size: 140%;
    line-height: 1.7;    
}

.service-waku{
	margin-bottom: 20px
}
p{
    font-size: 120%;
    line-height: 1.7;  
}
.product-title{
	font-size: 140%;
}

/*-------------------------------------------
タイトル
-------------------------------------------*/
.section-title-frame{
    background-color: #F1F9FE; 
    margin-bottom: 20px;
    height: 100px;
}
.section-title{
    margin-top: 25px;
}
.section-title p{
    padding-top: 10px;
    font-size: 130%;
    font-weight: bold;
}
.main-title{
    font-size: 280%;
    font-weight: bold;
}
/*-------------------------------------------
メイン画像
-------------------------------------------*/
.service-main-image {
  width: 100%;
  height: 300px;
  background-image: url('https://www.daiichisangyo.co.jp/service/img/service_main.jpg');
  background-size: cover;
  background-position: center;
}


/*-------------------------------------------
ナビ2
-------------------------------------------*/
.navi2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 30px;
  margin-bottom: 30px;
  border: 1px solid #036EB8;
  padding: 20px 0;
  list-style: none;
}
.navi2 li{
    font-size: 120%;
}
.navi2 li a {
  display: block;
}
/*-------------------------------------------
登録ガイド
-------------------------------------------*/
#user, #caution, #guarantee, #privacy, #serial{
    margin-bottom: 20px;
}
#user a{
  color: white;
  font-size: 130%;
  text-decoration: none;
}
a:hover{
  opacity: 0.7;
}
#user p{
  font-size: 200%;
  line-height: 1.5;
}
.no-guarantee{
    font-size: 120%;
    padding-left: 30px;
    list-style: none;
}
#user .apply{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 200px;
  margin: 30px 0px;
}
#user .web{
  font-size: 140%;
  background-color: #F18D02;
  padding: 15px 30px;
  display: inline-block;
}
#user .fax{
  font-size: 120%;
  background-color: #036EB8;
  padding: 10px 30px;
  display: inline-block;
}
/*-------------------------------------------
シリアルナンバー
-------------------------------------------*/
.serial{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}
.img-waku img{
    margin-bottom: 10px;
}

/*-------------------------------------------
スマートフォン
-------------------------------------------*/
@media (max-width: 767px) {
  
    .wrapper {
        padding: 0 10px; 
    }

    /* -------------------------------------------
    タイトル
    -------------------------------------------*/
    .section-title-frame {
        height: 100px;
        margin-bottom: 20px;
    }
    .section-title {
        padding-top: 30px;
        height: 100px;
    }
    .main-title {
        font-size: 200%; 
    }
    .section-title p{
    padding-top: 10px;
    font-size: 100%;
    }
    .title {
        font-size: 150%; 
    }
    .title-description li {
        font-size: 100%; 
    }

    /* -------------------------------------------
    ナビゲーション (navi2)
    -------------------------------------------*/
    .navi2 {
        flex-direction: column;
        gap: 10px; 
        margin-top: 30px;
        margin-bottom: 20px;
        padding: 10px 0;
        border: none;
    }
    .navi2 li {
        font-size: 100%; 
        width: 100%; 
        text-align: center;
        padding: 5px 0;
        border-bottom: 1px dashed #036EB8; 
    }
    .navi2 li:last-child {
        border-bottom: none; 
    }
	.service-main-image {
		height: 60vh;
        background-image: url('../img/service_main_small.jpg');
    }

    /* -------------------------------------------
    ユーザー登録セクション (#user)
    -------------------------------------------*/
    #user p {
        font-size: 120%; 
        text-align: center; 
    }
    #user .apply {
        flex-direction: column; 
        gap: 15px; 
        margin: 20px 0px;
    }
    #user .web,
    #user .fax {
        font-size: 100%; 
        width: 80%; 
        max-width: 300px; 
        padding: 15px 10px; 
        text-align: center;
    }
    
    #user .web {
        margin: 0 auto; 
    }
    #user .fax {
        margin: 0 auto; 
    }
}