@charset "utf-8";

/* ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■

【PC】ウィンドウ幅が769px以上の場合に適用するCSS

■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ */
@media print, screen and ( min-width:769px ) {

 .dog_supplement {
 width: 900px;
 margin: auto;
 }
.imgmv {
 position:relative;
 }
  .imgmv p{
 position:absolute;
 color:white;
 top:60px;
 left:30px;
 }
 .imgmv {
 width:100%
 }   



/* ==================================================================================

common

================================================================================== */
 .inner {
min-width:  850px;
margin: 0 auto;
width: calc(100% - 50px);
}
 .inner_mini {
min-width: 800px;
max-width: 900px;
margin: 0 auto;
width: calc(100% - 50px);
}

 .sec {
margin: 100px 0;
}



.img {
vertical-align: bottom;
object-fit: cover;
}

.text {
font-size: 1.2em;
text-align: center;
display: block;
}


/* common
======================================== */
.dog_area p {
line-height: 2.2;
text-align: left;
font-size:1.2rem; 
}
.dog_area h2  {
margin-top: 0;
}
.dog_area img {
margin: 20px 0;
}


/* h2
======================================== */
.dog_area h2 {
border-left: 3px solid var(--main-color);
background: var(--main-color-3);
padding: 10px 20px;
margin: 50px 0 30px;
/* border-radius: 0 10px 10px 0;*/
font-size: 1.8em;
border-bottom: solid 3px #ffeb3b;
/* display: inline-block;*/
}

.dog_reco h2 {
border-left: 3px solid var(--main-color);
background: var(--main-color-3);
padding: 10px 20px;
margin: 50px 0 30px;
border-radius: 0 10px 10px 0;
font-size: 1.4em;
border-bottom: solid 3px #ffeb3b;
display: inline-block;
}

.monitor h2 {
width:100%;
padding: 0.5em 1em;
margin: 2em 0;
color: #2c2c2f;
background: #e4f3f3;
}

/* h3
======================================== */
.dog_area h3 {
position: relative;
padding: 15px 0;
margin: 0 30px;
font-size: 1.4em;
}
.dog_area h3:before,
.dog_area h3:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background: var(--main-color-3);
}
.dog_area h3:before {
width: 20%;
background: var(--main-color);
z-index: 1;
}
.dog_area h3:after {
}

.monitor h3  {
  text-align:center;
}


/* fl
======================================== */
.dog_area .fl {
display: flex;
    gap: 50px;
}
.dog_area .fl img {
width: 50%;
    height: 320px;
    margin: 10px 0;
	 border-radius: 10px;
}
.dog_area .fl p {
width: 100%;
/*margin: 0 0 30px 0;*/
}


/* 画像重ねる
======================================== */

.check {
  position:relative;
  width:800px;
  height:230px;
}

.check1 {
  position:absolute;
  top:10px;
  left:50%;
  width:50%;
}

.check2  {
  position:absolute;
  top:50px;
  right:45%;
  width:50%;
  height:100%;
  background:#F8F7E3;
  border-radius:20px;
}

/* チェック
======================================== */
.point_board li {
    text-align: left;
    margin-top: 20px;
    margin-left: 40px;
    margin-right: auto;
}
.checkmark001 {
    padding-left: 30px;
    position: relative;
}
.checkmark001:after {
    border-left: 2px solid #484343;
    border-bottom: 2px solid #484343;
    width: 18px;
    height: 5px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 5px;
    top: 3px;
}
.checkmark001:before, .checkmark001:after {
    content: "";
    display: block;
    position: absolute;
}

.checkmark001:before {
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 1px solid #484343;
    left: 0;
    top: 2px;
}
.checkmark001:before, .checkmark001:after {
    content: "";
    display: block;
    position: absolute;
}
/* モニター
======================================== */
.monitor p  {
  text-align:right;
}
.monitor ul {
    font-size: 1.3rem;
    margin:13px;
}

.monitor  ul li {
	padding-left: 95px;
	line-height: 3.5em;
	background: left top no-repeat;
	background-size: 70px auto;
}
.monitor  ul li:nth-child(1) {
	background-image: url(/stg/download/80010501_A.jpg);
}
.monitor  ul li:nth-child(2) {
	background-image: url(/stg/download/80010501_B.jpg);
}
.monitor  ul li:nth-child(3) {
	background-image: url(/stg/download/80010501_C.jpg);
}
 
/* カード
======================================== */

.card {
  background-color: #e7f3ff;
  color: #484343;
  padding: 1rem;
  height: 8rem;
  border-radius: 20px;
}

 .card {
        width: 50%;
       text-align: center;
       font-size: 1.3em;
       padding:30px;
    }

.card_text {
  max-width: 850px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
}

/* Screen larger than 640px? 2 column */
@media (min-width: 640px) {
  .cards__text { grid-template-columns: repeat(2, 1fr); }
}

.bname p {
    margin: 0; 
    padding: 0;
    font-size:1.1em;
}
.name {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: solid 2px #000000;
}
.name p {
    margin: 0; 
    padding: 0;
    font-size:1.1em;
}


    .dog_supplement {
        width: 900px;
        margin: auto;
    }
    .imgmv {
        position:relative;
        }
     .imgmv p {
         position:absolute;
         color:white;
         top:70px;
         left:70px;
         }
      .imgmv {
          width:100%
        }