html{
  scroll-behavior:smooth;
}
#doujin2022LP{
  max-width:940px;
  font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
#doujin2022LP a{
  text-decoration:none;
  cursor:pointer;
  font-weight:bold;
}

/*イントロはここから*/
#doujin2022LP .mainIntro{
  padding:80px 30px;
  text-align:center;
  font-size:20px;
  position:relative;
}
#doujin2022LP .mainIntro .intro-img01{
  position:absolute;
  top:80px;
  left:30px;
}
#doujin2022LP .mainIntro .intro-img02{
  position:absolute;
  bottom:200px;
  right:30px;
}
.mainIntro nav{
  margin-top:80px;
}
.mainIntro nav a{
  display: inline-block;
  min-width:190px;
  padding: 15px;
  text-decoration: none;
  background: #668ad8;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 30px;
}
.mainIntro nav a:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
  border-bottom: none;
}

/* LINE風 */
#mainItem01 h2,#mainItem05 h2{
  background:#4D4D4D;
  font-size:35px;
  color:white;
  padding:30px;
  margin-bottom:0px;
}
#mainItem01 .talk,#mainItem05 .talk{
  background:#769ece;
  padding:15px 15px 0 15px;
}
.balloon-color {
  display: flex;
  flex-wrap: wrap;
}
/* 左の吹き出し */
.balloon-color.left {
  flex-direction: row; /* 左から右に並べる */
}
.left .chatting-color {
  position: relative;
  display: inline-block; /* 吹き出しが文字幅に合わせます */
  margin: 15px 20px 50px;
  padding: 10px 20px;
  background: white; /* （◯）カラー変更はこちら */
  text-align: left; /* テキスト左揃え */
  border-radius: 15px; /* 枠の丸みの設定はこちら */
}
.left .chatting-color::after {
  content: "";
  border: 15px solid transparent;
  border-top-color: white; /* （◯）とカラーを合わせる */
  position: absolute;
  top: 15px; /* 三角部分の高さ */
  left: -15px; /* 三角部分の位置 */
}
/* 右の吹き出し */
.balloon-color.right {
  flex-direction: row-reverse; /* 右から左に並べる */
}
.right .chatting-color {
  position: relative;
  display: inline-block; /* 吹き出しが文字幅に合わせます */
  margin: 15px 20px 20px;
  padding: 10px 20px;
  background: #7adc40; /* （△）カラー変更はこちら */
  text-align: left; /* テキストの位置変更はこちら */
  border-radius: 15px; /* 枠の丸みの設定はこちら */
}
.right .chatting-color::after {
  content: "";
  border: 15px solid transparent;
  border-top-color: #7adc40; /* （△）とカラーを合わせる */
  position: absolute;
  top: 15px; /* 三角部分の高さ */
  right: -15px; /* 三角部分の位置 */
}
/* アイコンの名前 */
.name-color {
  width: 100px; /* アイコンの大きさと合わせる */
  font-size: 15px;
  text-align: center; /* 名前は真ん中に */
}
.text-color {
  color: black; /*  テキストのカラー変更はこちら */
  font-size: 20px; /* テキストサイズの変更 */
}
#mainItem01 .talk .talk-txt{
  font-size:40px;
  font-weight:bold;
  text-align:center;
  padding:50px 0 100px 0;
}

#mainItem02{
  background-image:url("https://novelty.itembox.design/item/img/free-page/doujin2022LP/bg01.jpg");
}
#mainItem03{
  background-image:url("https://novelty.itembox.design/item/img/free-page/doujin2022LP/bg02.jpg");
}
#mainItem04{
  background-image:url("https://novelty.itembox.design/item/img/free-page/doujin2022LP/bg03.jpg");
}
#doujin2022LP .itemlist{
  padding:30px 30px 70px 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
}

#mainItem02 .itemlist .item-box{
  margin-bottom:30px;
}
#mainItem02 .itemlist .item-box .item{
  background:white;
  text-align:center;
  padding:20px;
}
#mainItem02 .itemlist .item-box .item h4{
  font-size:20px;
  font-weight:bold;
  margin-top:0px;
  margin-bottom:10px;
}
#mainItem02 .itemlist .item-box .item .item-dteail{
  display: flex;
}
#mainItem02 .itemlist .item-box .item .item-dteail .item-txt{
  text-align:center;
  width:180px;
}
#mainItem02 .itemlist .item-box .item .item-dteail .item-txt img{
  display:block;
  margin:0 auto;
  margin-bottom:10px;
}
#mainItem02 .itemlist .item-box .item .item-dteail .item-txt p{
  margin-top:20px 0;
}
#mainItem02 .itemlist .item-box .item .item-dteail .item-txt span{
  font-size:20px;
  color:#FF0000;
  font-weight:bold;
}

/* 印刷方法別 */
#mainItem03 .itemlist .subItem{
  background:white;
  text-align:center;
  padding:20px;
  margin-bottom:30px;
}
#mainItem03 .itemlist .subItem p{
  font-size:23px;
  margin:0px;
}
#mainItem03 .itemlist .subItem h5{
  font-size:30px;
  font-weight:bold;
  margin-bottom:10px;
}
#mainItem03 .itemlist .subItem a{
  font-size:18px;
  display: block;
  padding:10px;
  text-decoration: none;
  background: white;/*ボタン色*/
  color: #707070;
  border: solid 1px #707070;
  border-bottom: solid 4px #707070;
  border-radius: 10px;
  margin-top:20px;
}
#mainItem03 .itemlist .subItem a:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
  border-bottom: none;
}

#mainItem04 .itemlist a{
  display: inline-block;
  margin-bottom:30px;
}

#doujin2022LP .sp{
  display: block !important;
}
#doujin2022LP .pc{
  display: none !important;
}

/*ここからレスポンシブ*/
@media (min-width: 1px) and (max-width: 767px){
  #doujin2022LP .sp{
    display: none !important;
  }
  #doujin2022LP .pc{
    display: block !important;
  }
  /*イントロはここから*/
  #doujin2022LP .mainIntro{
    padding:30px 0px;
    font-size:17px;
  }
  .mainIntro nav{
    margin-top:50px;
  }
  .mainIntro nav a{
    margin-bottom:15px;
    min-width:160px;
  }

  /* LINE風 */
  #mainItem01 h2,#mainItem05 h2{
    font-size:25px;
    padding:15px;
  }
  #mainItem01 .talk,#mainItem05 .talk{
    padding:10px 10px 0 10px;
  }
  /* 左の吹き出し */
  .left .chatting-color {
    margin: 0px 20px 10px;
    padding: 10px;
  }
  /* 右の吹き出し */
  .right .chatting-color {
    margin: 0px 20px 20px;
    padding: 10px;
  }
  /* アイコンの大きさ */
  .icon-color {
    width: 40px;
    height: 40px;
  }
  /* アイコンの名前 */
  .name-color {
    width: 40px; /* アイコンの大きさと合わせる */
    font-size: 10px;
  }
  .text-color {
    font-size: 15px; /* テキストサイズの変更 */
  }
  #mainItem01 .talk .talk-txt{
    font-size:30px;
  }

  #doujin2022LP .itemlist{
    padding:30px 15px 70px 15px;
  }

  /* オススメ商品 */
  #mainItem02 .itemlist .item-box .item{
    padding:20px 10px;
  }
  #mainItem02 .itemlist .item-box .item h4{
    line-height:22px;
  }

  /* 印刷方法別 */
  #mainItem03 .itemlist .subItem p{
    font-size:20px;
  }
  #mainItem03 .itemlist .subItem h5{
    font-size:25px;
  }
  #mainItem03 .itemlist .subItem a{
    font-size:15px;
  }

  /* 人気のカテゴリ */
  #mainItem04 .itemlist a{
    width:45%;
  }
}