﻿.qa_type3 .cate_box .box_txt1 {background: #fff3dd !important;}

.qa_type3 .con_no{
	left: 20px;
	top: 15px
}
.qa_type3 .cate_box .box_title1, .qa_type3 .cate_box .box_txt1{
	min-height: 1.5em
}
.qa_type3 .box_q{
	background-image: url(./Dup/img/icon_q.png);
	background-repeat: no-repeat;
	background-position: top 2px left;
	background-size: 60px
}
.qa_type3 .box_a{
	background-image: url(./Dup/img/icon_a.png);
	background-repeat: no-repeat;
	background-position: top 2px right;
	background-size: 60px
}
.qa_type3 .box_q, .qa_type3 .box_a{
	padding: 0 90px
}
.qa_type3 .box_q .box_title1::before, .qa_type3 .box_a .box_txt1::before{
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    border-color: rgba(0, 0, 0, 0);
}
.qa_type3 .box_q .box_title1::before{
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 10px;
    border-right-width: 15px;
    margin-top: -10px;
    border-right-color: #ffa300;
    right: 100%;
    top: 34px;
}
.qa_type3 .box_a .box_txt1::before{
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 15px;
    border-right-width: 10px;
    margin-top: -10px;
    border-left-color: #fff3dd;
    left: 100%;
    top: 35px;
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.qa_type3 .box_q{
	padding-right: 0
}
.qa_type3 .box_a{
	padding-left: 0
}
.qa_type3 .con_no{
    top: 13px;
}
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ コード集サイト ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/




/* コンテンツ増やす---------------------------------------------------------------------------------------------*/
#contents2 .con_box1::before{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none}
#contents2 .con_wrap{right: -10px}
#contents2.trans .con_wrap{
	opacity: 1;
	right: 0;}
#contents2 .con_bg{
	top: 0;
	right: 0}
#contents2 .con_img{
	top: 100px;
	bottom: 100px;
	left: 0}
#contents2 .con_box1::before{
	width: 40px;
	height: 1px;
	left: 0;
	bottom: 0;
	background-color: #fff}


/*タブレット*/
@media screen and (max-width: 768px){
.custom_wrap {position: relative;}
#contents .con_bg, #contents2 .con_bg {z-index: 0;}
#contents2 .con_img {
    display: none;
    height: 0;
    top: 0;
    bottom: auto;
    opacity: 0;}
#contents .con_img {
    height: 60vw;
    top: auto;
    bottom: auto;
    z-index: 2;}
#contents2 .d_flex{
    height: 100% !important;
}
}

#intro .intro_right div {height: 100% !important;}

/* コンテンツ増やす---------------------------------------------------------------------------------------------*/


/* color  --------------------------------------------------------------------------------------------*/
div#wrap {background: #fffff5;}


body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #3f3c3b;}
.txt_white,.hvr_txt_white:hover{color: #fffff5;}
.txt_color1,.hvr_txt_color1:hover{color: #3ac18e} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #fffff5} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #ffa300} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #fff3dd} /* アクセントカラー2 */
/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: #fffff5} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: #3f3c3b} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #3ac18e} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #fffbed} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #ffa300} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #ffd791} /* アクセントカラー2 */
/* border-color ※!important */
.border_color1,.hvr_border_color1:hover{border-color: #3ac18e !important}
.border_color2,.hvr_border_color2:hover{border-color: #fffff5 !important}
.border_color3,.hvr_border_color3:hover{border-color: #ffa300 !important}
.border_color4,.hvr_border_color4:hover{border-color: #ffd791 !important}


.pager li a {
    background: #ffa300;
    color: #fffde9;}

div#pp-nav {
  /*background: #fffde9;*/
  border-radius: 3px;}
  
/*linkStyle*/
a.linkStyle {
    color: #3ac18e;
    transition: 0.5s;
}
a.linkStyle:hover {
    color: #3ac18e;
}


#cms_1-c .border_color2,#cms_1-c .hvr_border_color2:hover {border-color: #ffa300 !important;}

/* color  --------------------------------------------------------------------------------------------*/


/* font  --------------------------------------------------------------------------------------------*/
body {font-family: 'Zen Kaku Gothic New','Open Sans',"Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;}
.font_bar,h1,h2,h3,h4,h5,h6,.cate_title,.box_title1,.box_title2 {font-family: 'Kiwi Maru','Zen Kaku Gothic New',"Noto Sans JP","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
    font-weight: 500 !important;
}

/* font  --------------------------------------------------------------------------------------------*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*メインビジュアル*/
img.main_ie {
    bottom: 0;
    left: 50%;
    transform: translate(-40%, 0);
    height: 90%;
    width: auto;}

h1.main_logo {
    position: fixed;
    z-index: 6;
    padding-top: 20px;
    padding-left: 20px;
}

.catch {
    height: 68%;
    left: 57%;
    top: 1%;
    width: auto !important;
    z-index: 5;
    transform: translate(50%, 0);}

.item03 {
    width: 13%;
    bottom: 4%;
    left: 6%;}
.item04 {
    width: 13%;
    top: 48%;
    left: 5%;
    transform: translate(0%, -50%);
}

/*犬*/
.poyooon{animation: poyooon 1s infinite;}

@keyframes poyooon {
  0%,100% {bottom: 4%;transform: scale(1);}
  /*30% {bottom: 4%; transform: scale(1,1);}*/
  /*60% {transform: scale(1);}*/
  50% {bottom: 5%;transform: scale(1,1);}}
/*犬*/

/*メインビジュアル*/


#intro .intro_left {
    background-image: url(./Dup/img/item05.png),url(./Dup/img/item06.png);
    background-position: top,bottom;
    background-size: 100%;
    background-repeat: no-repeat;
}

/*img.item08 {*/
/*    top: -20px;*/
/*    width: 35%;*/
/*}*/

/*img.item11 {*/
/*    width: 17%;*/
/*    top: 46%;*/
/*    z-index: 3;*/
/*    right: -50px;*/
/*    transform: translate(-50%, -50%);*/
/*}*/


#contents .con_img::before {
    content: '';
    background: url(dup/img/item09.png);
    position: absolute;
    width: 26%;
    height: 41%;
    background-repeat: no-repeat;
    background-size: contain;
    right: -15%;
    bottom: 0;
    z-index: 2;
}



#contents .con_title1::before {
    content: '';
    background: url(dup/img/item08.png);
    position: absolute;
    width: 300px;
    height: 180px;
    background-repeat: no-repeat;
    background-size: contain;
    right: 10px;
    top: 0px;
    z-index: 0;
    transform: translate(0%, -92%);
}

#contents2 .con_title2{position:relative;}

#contents2 .con_box1::after {
    content: '';
    background: url(dup/img/item10.png);
    position: absolute;
    width: 170px;
    height: 157px;
    background-repeat: no-repeat;
    background-size: contain;
    right: -139px;
    bottom: 17%;
    z-index: 4;
}

#contents2 .con_img::before {
    content: '';
    background: url(dup/img/item12.png);
    position: absolute;
    width: 15%;
    height: 24%;
    background-repeat: no-repeat;
    background-size: contain;
    right: -16%;
    bottom: 5%;
    z-index: 2;
}

.con_title{position:relative;}

    
#contents .con_bg,#contents2 .con_bg { background: url(dup/img/bg_img.jpg);}

.con_box1, .con_box2 {
    background: #fffff5;
    color: #3f3c3b;
    padding: 20px;
    z-index: 1;
}

.con_title{color: #3ac18e}

h2.intro_title{
    font-size: -webkit-calc(1rem + 18px);
    font-size: calc(1rem + 18px);
    line-height: 1.5;
    text-shadow: -1px -1px 0px;
    position: relative;
}

h2.intro_title::before {
    content: '';
    background: url(dup/img/item07.png);
    position: absolute;
    width: 26%;
    height: 97%;
    background-repeat: no-repeat;
    background-size: contain;
    right: -5%;
    top: -64px;
}

.cms_6-a.cms_wrap {
    background: #fffbed;
    padding: 30px;
}


.cms_box{position:relative;}

.cms_box:nth-of-type(1)::before {
    background: url(dup/img/item03.png);
    content: '';
    position: absolute;
    width: 10%;
    height: 21%;
    background-repeat: no-repeat;
    left: 3%;
    bottom: 4%;
    z-index: 3;
    background-size: contain;
}

.cms_box:nth-of-type(4)::before {
    background: url(dup/img/item13.png);
    content: '';
    position: absolute;
    width: 11%;
    height: 10%;
    background-repeat: no-repeat;
    right: 2%;
    bottom: 5%;
    z-index: 3;
    background-size: contain;
}

/*犬*/
.cms_box:nth-of-type(1)::before{animation: poyooon 1s infinite;}

@keyframes poyooon {
  0%,100% {bottom: 0%;transform: scale(1);}
  /*30% {bottom: 4%; transform: scale(1,1);}*/
  /*60% {transform: scale(1);}*/
  50% {bottom: 1%;transform: scale(1,1);}}
  


.cms_box:nth-of-type(4)::before{
    transform-origin: center bottom;
    animation: yurayura 2s linear infinite;
}

@keyframes yurayura {
  0% , 100%{
      transform: rotate(3deg);
  }
  50%{
      transform: rotate(-3deg);
  }
}
/*犬*/
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*プロフィール*/
.cms_2-d img, #cms_2-d img {height: auto !important;}

footer.bg_color2.mg_t-100px {position: relative;}
footer.bg_color2.mg_t-100px::before {
    background: url(dup/img/item13.png);
    content: '';
    position: absolute;
    width: 9%;
    height: 20%;
    background-repeat: no-repeat;
    right: 2%;
    top: -17%;
    z-index: 3;
    background-size: contain;
}

footer.bg_color2.mg_t-100px::before{
    transform-origin: center bottom;
    animation: yurayura 2s linear infinite;
}

@keyframes yurayura {
  0% , 100%{
      transform: rotate(3deg);
  }
  50%{
      transform: rotate(-3deg);
  }
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

@media screen and (max-width: 1500px){
#contents .con_title1::before {
    width: 260px;
    height: 150px;}

    img.main_ie {
    bottom: 50%;
    left: 50%;
    transform: translate(-40%, 50%);
    height: auto;
    width: 85%;}
}

/*タブレット*/
@media screen and (max-width: 768px){
section#custom {height: 60vh !important;}

#contents .con_img::before {
    content: '';
    background: url(dup/img/item09.png);
    position: absolute;
    width: 26%;
    height: 41%;
    background-repeat: no-repeat;
    background-size: contain;
    right: -1%;
    bottom: 0;
    z-index: 2;}

body#body {overflow: hidden;}


.item04 {
    width: 15%;
    top: 61%;
    left: 2%;
    transform: translate(0%, -50%);}

.item03 {left: 5%;
    bottom:8%;
    margin-bottom: 5%;
}

/*犬*/
.poyooon{animation: poyooon 1s infinite;}

@keyframes poyooon {
  0%,100% {bottom: 8%;transform: scale(1);}
  /*30% {bottom: 4%; transform: scale(1,1);}*/
  /*60% {transform: scale(1);}*/
  50% {bottom: 9%;transform: scale(1,1);}}
/*犬*/




img.main_ie {bottom: 45%;}

.catch {
    height: 57%;
    left: 58%;
    top: 6%;
    width: auto !important;
    z-index: 5;
    transform: translate(50%, 0);}

h1.main_logo {
    padding-top: 10px;
    padding-left: 10px;
    max-width: 250px;}

h2.intro_title::before {
    width: 23%;
    height: 82%;
    right: -1%;
    top: -51px;}


#contents .con_title1::before {
    width: 200px;
    height: 113px;
    top: 9px;
}

#contents .con_img::before {
    width: 26%;
    height: 41%;
    z-index: 2;
    top: -27%;
    left: 2%;}

.con_wrap {opacity: 1;}

#contents2 .con_box1::after {
    content: '';
    background: url(dup/img/item10.png);
    position: absolute;
    width: 157px;
    height: 146px;
    background-repeat: no-repeat;
    background-size: contain;
    right: -4%;
    bottom: -40%;
    z-index: 11;}
    

#contents2 .con_box1 {z-index: 5;}
#contents2 .con_box2 {z-index: 0;}


.cms_box:nth-of-type(1)::before {
    width: 15%;
    height: 14%;}

/*犬*/
.cms_box:nth-of-type(1)::before{animation: poyooon 1s infinite;}

@keyframes poyooon {
  0%,100% {bottom: -2%;transform: scale(1);}
  /*30% {bottom: 4%; transform: scale(1,1);}*/
  /*60% {transform: scale(1);}*/
  50% {bottom: -1%;transform: scale(1,1);}}
  
.cms_box:nth-of-type(4)::before {
    width: 16%;
    height: 10%;}

.cms_box:nth-of-type(4)::before{
    transform-origin: center bottom;
    animation: yurayura 2s linear infinite;
}

@keyframes yurayura {
  0% , 100%{
      transform: rotate(3deg);
  }
  50%{
      transform: rotate(-3deg);
  }
}
/*犬*/


#intro .intro_left {background-size: 110%;}

footer.bg_color2.mg_t-100px::before {
    background: url(dup/img/item13.png);
    content: '';
    position: absolute;
    width: 15%;
    height: 16%;
    background-repeat: no-repeat;
    right: 2%;
    top: -12%;
    z-index: 3;
    background-size: contain;
}

footer.bg_color2.mg_t-100px::before {
    width: 76px;
    height: 80px;
    right: 2%;
    top: -6%;}

.opacity04_sp {opacity: 0.7;}

h1.main_logo {
    max-width: 170px;
    background: #fffce9;
    padding:10px;

}






/*スマホ*/
@media screen and (max-width: 667px){
    
#page_title .title_wrap p {
    height: auto !important;
    padding-bottom: 5px !important;
}
#page_title .title_wrap p {
    font-size: 24px;
}
.banner02 {margin-top: 5px;}

h1.main_logo {
    padding: 6px;
    max-width: 110px;
    background: #fffce9;
}
.item03 {
    left: 4%;
    width: 17%;
    margin-bottom: 16%;
}
    
/*犬*/
.poyooon{animation: poyooon 1s infinite;}

@keyframes poyooon {
  0%,100% {bottom: 4%;transform: scale(1);}
  /*30% {bottom: 4%; transform: scale(1,1);}*/
  /*60% {transform: scale(1);}*/
  50% {bottom: 5%;transform: scale(1,1);}
}
/*犬*/


.item04 {
    width: 18%;
    top: 68%;
    left: 2%;
    transform: translate(0%, -50%);
    z-index: 2;
}

    
img.main_ie {
    bottom: 51%;
    width: 100%;
    transform: translate(-45%, 50%);}
    
.catch { left: 53%;}

h2.intro_title {
    font-size: -webkit-calc(1rem + 6px);
    font-size: calc(1rem + 6px);
    line-height: 1.5;
    text-shadow: 0.5px -0.5px 0px;
    position: relative;}
    
#intro .intro_left {background-size: 118%;}

h2.intro_title::before {
    width: 28%;
    height: 80%;
    right: -1%;
    top: -55px;}
h2.con_title {
    font-size: -webkit-calc(1rem + 5px);
    font-size: calc(1rem + 5px);
    letter-spacing: 0px !important;}

#contents .con_title1::before {
    width: 171px;
    height: 102px;
    top: -5px;
    right: -25px;}
    
#contents .con_img::before {
    width: 29%;
    height: 70%;
    z-index: 2;
    top: -47%;
    left: 2%;}
    
#contents2 .con_wrap {right: 0px;}


#contents2 .con_box1::after {
    content: '';
    background: url(dup/img/item10.png);
    position: absolute;
    width: 112px;
    height: 109px;
    background-repeat: no-repeat;
    background-size: contain;
    right: -4%;
    bottom: -20%;
    z-index: 11;}


    
    
/*犬*/

.cms_box:nth-of-type(1)::before {
    width: 20%;
    height: 7%;}

.cms_box:nth-of-type(1)::before{animation: poyooon 1s infinite;}
.cms_box:nth-of-type(4)::before {
    width: 76px;
    height: 80px;
    bottom: -10%;
}

@keyframes poyooon {
  0%,100% {bottom: -11%;transform: scale(1);}
  /*30% {bottom: 4%; transform: scale(1,1);}*/
  /*60% {transform: scale(1);}*/
  50% {bottom: -10%;transform: scale(1,1);}}
  


.cms_box:nth-of-type(4)::before{
    transform-origin: center bottom;
    animation: yurayura 2s linear infinite;
}

@keyframes yurayura {
  0% , 100%{
      transform: rotate(3deg);
  }
  50%{
      transform: rotate(-3deg);
  }
}
/*犬*/
}


/*スマホ*/
@media screen and (max-width: 350px){
#page_title .title_wrap p {
    font-size: 19px;
    letter-spacing: 4px;
}
}