@charset "utf-8";
/* CSS Document */
/*---------------------------------------
#tips2
---------------------------------------*/
.all_main01::before {
 background-image: url("../img/tips2_img05.jpg");
 background-position: center 50%;
 background-size: cover;
}
.all_main01 .pic {
 margin: 0;
 position: absolute;
 right: 0;
 bottom: 0;
 width: 320px;
 height: 302px;
}
.pic { 
 text-align: center;
 margin: 20px auto;
}
#tips2 { counter-reset: num; }
#tips2 .all_title01 {
 position: relative;
 counter-increment: num;
 padding-top: 30px;
}
#tips2 .all_title01::before {
 content: "Check " counter(num);
 display: inline-block;
 background-color: #00679a;
 color: #fff;
 font-size: 18px;
 line-height: 25px;
 border-radius: 1000px;
 padding: 0 20px;
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
}
/* tips2_sec01
---------------------------------------*/
.tips2_sec01 {
 margin: 20px auto;
 padding: 20px;
 line-height: 1.6;
 background-color: #f4f4f4;
}
.tips2_sec01 .catch {
 color: #006599;
 font-weight: bold;
 font-size: 1.2em;
 text-align: center;
}
.tips2_sec01 .catch .small { font-size: 0.7em; }
.tips2_sec01 ul {
 display: flex;
 justify-content: space-around;
 counter-reset: cnum;
}
.tips2_sec01 ul li {
 width: 19%; 
 background:#fff;
 padding: 34px 10px 10px;
 position: relative;
 counter-increment: cnum;
}
.tips2_sec01 ul li::before {
 content: "Check " counter(cnum);
 display: block;
 width: 60%;
 margin: 0 auto;
 text-align: center;
 background-color: #00679a;
 color: #fff;
 font-size: 14px;
 line-height: 19px;
 border-radius: 1000px;
 position: absolute;
 top: 10px;
 left: 50%;
 transform: translateX(-50%);
}
.tips2_sec01 ul li a {
 display: flex;
 height: 100%;
 align-items: center;
 text-decoration: none;
 font-size: 0.9em;
 line-height: 1.6;
 padding-bottom: 16px;
 position: relative;
}
.tips2_sec01 ul li a::after {
 content: "";
 width: 10px;
 height: 10px;
 background:  url("../img/arrow01_blue.svg") no-repeat center top / 100% auto;
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%) rotate(90deg); 
}
/* tips2_sec03
---------------------------------------*/
.tips2_sec03 {
 background-color: #FBF4D3;
 border: 4px solid #F1E197;
 padding: 20px;
 margin: 20px 0;
 color: #663300;
}
.tips2_sec03 ul.list01 li::before { background-color: #663300; }
/* tips2_sec07
---------------------------------------*/
.tips2_sec07 {
 width: 727px;
 height: 93px;
 background: URL("../img/tips2_bg03.gif") no-repeat left top / 100% auto;
 padding:4px 10px 0 432px;
 margin: 40px auto 0;
}
/* tips2_sec04
---------------------------------------*/
.tips2_sec04 {
 position: relative;
 padding: 2px 0;
 margin-top: 40px;
}
.tips2_sec04::before {
 content: "";
 width: 100vw;
 height: 100%;
 background-color: #E3F9FF;
 position: absolute;
 top: 0;
 left: 50%;
 margin-left: -50vw;
 z-index: -1;
}
/* tips2_sec08
---------------------------------------*/
.tips2_sec08 {
 position: relative;
 padding: 2px 0;
 margin-top: 40px;
}
.tips2_sec08::before {
 content: "";
 width: 100vw;
 height: 100%;
 background-color: #E3F9FF;
 position: absolute;
 top: 0;
 left: 50%;
 margin-left: -50vw;
 z-index: -1;
}
/* tips2_sec05
---------------------------------------*/
.tips2_sec05 {
 width:727px;
 overflow: hidden;
 margin: 30px auto;
}
.tips2_sec05 .pic {
 float: left;
 width: 152px;
 margin: 0;
}
.tips2_sec05 .text {
 width: 575px;
 float: right;
 margin-top: 10px;
 background-image: URL("../img/tips2_bg02.gif"),URL("../img/tips2_bg01.gif");
 background-repeat: no-repeat , no-repeat;
 background-position: right bottom , left top; 
 padding: 2px 20px 2px 50px;
 font-size: 0.9em;
}

@media screen and (max-width: 960px) {
 .all_main01 .all_main01_title {
  text-align: center;
  aspect-ratio: 2000 / 900;
  margin: 0 -16px;
  padding: 10px 16px;
  background: url("../img/tips2_img05.jpg") no-repeat center top / cover;
 }
 .all_main01 .all_main01_title::after {
  width: 80px;
  height: 75px;
  background: url("../img/tips2_img06.png") no-repeat center top / 100% auto;
  position: absolute;
  right: 0;
  bottom: 0;  
 }
 .all_main01 .pic { display: none; }
 /* .tips2_sec01
 ---------------------------------------*/
 .tips2_sec01 { padding: 10px; }
 .tips2_sec01 ul {
  flex-wrap: wrap;
  row-gap: 10px;
 }
 .tips2_sec01 ul li { width: 48%; }
 .tips2_sec01 ul li:first-child { width: 100%; }
 /* tips2_sec03
---------------------------------------*/
 .tips2_sec03 { font-size: 0.9em; }
 /* .tips2_sec07
 ---------------------------------------*/
 .tips2_sec07 {
  background: none;
  width: 282px;
  height: 81px;
  padding: 0;
 }
 /* tips2_sec05
 ---------------------------------------*/
 .tips2_sec05 { width:100%; }
 .tips2_sec05 .pic { display: none; }
 .tips2_sec05 .text {
  width: auto;
  background-image: none;
  padding: 10px;
  border-radius: 10px;
  background-color: #CFE7FF;  
 }
}