/*
html, body{overflow: auto}
.pp-section{position: static}
.fix_bnr{
    position:absolute;
}*/


/*--all page---------------------------
-------------------------------------*/
body{
    overflow:hidden;
}
.linkStyle{
    color:#ffbe08;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
    text-decoration:underline;
}
#logo2{
    width:350px;
}

.fix_bnr{
    left:20px;
    bottom:20px;
    z-index:5;
}
.fix_bnr img:hover{
  animation: mochimochi 1s;
}

@keyframes mochimochi {
  0% {
    transform: scale(1, 0.9);
  }
  20% {
    transform: scale(0.9, 1.1);
  }
  90% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 0.9);
  }
}

/*--top page---------------------------
-------------------------------------*/
.catch {
    width: 52vw;
    max-width: 1000px;
    top: -6%;
    left: 3%;
    z-index: 2;
}
.custom_logo {
    width: 500px;
    top: 4%;
    left: 5%;
    z-index: 2;
}

.intro_left{
    background-image: url('./Dup/img/bg1.png');
	background-size: 400px;
	background-position: top 0 left 0;
	background-repeat: repeat;
	animation: bgloop 20s linear infinite;    
}
@keyframes bgloop {
	0% {background-position: top 0 left 0;}
	100% {background-position: top -400px left 400px;}
}

.intro_title{
    width: 500px;
    margin: 0 auto 30px;
}
.intro_txt{
    background-color: rgba(255,255,255,0.7);
}

.scroll{
    animation: fluffy1 3s ease infinite;
}
@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-7px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-7px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

/*kotei*/
#kotei .d_flex{
  background-color   : #ffbe08;
  background-image   : radial-gradient(#ffffff 17%, transparent 20%),
                       radial-gradient(#ffffff 17%, transparent 20%);
  background-position: 0 0, 15px 15px;
  background-size    : 30px 30px;
}
.kotei_title{
    top: 0;
    left: 0;
}
.kotei_wrap{
    font-size:1.2rem;
}
.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: 100px
}
.qa_type3 .box_a{
	background-image: url(./Dup/img/icon_a.png);
	background-repeat: no-repeat;
	background-position: top 2px right;
	background-size: 95px
}

.qa_type3 .box_q.q1,
.qa_type3 .box_q.q3{
    background-image: url(./Dup/img/icon_q2.png);
}
.qa_type3 .box_a.a2,
.qa_type3 .box_a.a4{
	background-image: url(./Dup/img/icon_a2.png);
}
.qa_type3 .box_a.a3{
	background-image: url(./Dup/img/icon_a3.png);
}
.qa_type3 .box_q.q4{
    background-image: url(./Dup/img/icon_q3.png);
}
.qa_type3 .box_q, .qa_type3 .box_a {
    padding: 20px 115px 10px;
}
.qa_type3 .box_title1 span{
    background:linear-gradient(transparent 60%, #ffdf66 60%);
}
/*吹き出し*/
.qa_type3 .box_txt1{
    background-color: white;
    border: 2px solid #333;
    position:relative;
}

.qa_type3 .box_txt1:after,.qa_type3 .box_txt1:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    left:100%;
    top:50%;
}
.qa_type3 .box_txt1:after{
    border-color: rgba(255, 255, 255, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-top: -10px;
    border-left-color:#FFFFFF;
}
.qa_type3 .box_txt1:before{
    border-color: rgba(51, 51, 51, 0);
    border-top-width:13px;
    border-bottom-width:13px;
    border-left-width:13px;
    border-right-width:13px;
    margin-top: -13px;
    margin-left: 0px;
    border-left-color:#333333;
}

.qa_type3 .box_title1{
    background-color: #fbf5ce;
    border: 2px solid #333;
    position:relative;
}
.qa_type3 .box_title1:after,.qa_type3 .box_title1:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:50%;
}
.qa_type3 .box_title1:after{
    border-color: rgba(255, 255, 255, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-top: -10px;
    border-right-color:#fbf5ce;
}
.qa_type3 .box_title1:before{
    border-color: rgba(51, 51, 51, 0);
    border-top-width:13px;
    border-bottom-width:13px;
    border-left-width:13px;
    border-right-width:13px;
    margin-top: -13px;
    margin-right: 0px;
    border-right-color:#333333;
}



/*--under page---------------------------
-------------------------------------*/




/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){


.custom_box{
    background-position: left 62% center;
}
.catch {
    width: 83vw;
    top: 18%;
    left: -10%;
}
.custom_logo {
    width: 400px;
    bottom: 20%;
    left: 11%;
}

.qa_type3 .box_q{
    padding: 10px 80px 10px 100px;
    background-position: top 20px left;
    background-size: 85px;
}
.qa_type3 .box_a{
    padding: 10px 100px 10px 80px;
    background-position: top 20px right;
    background-size: 80px;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

.width_120_sp{
    width:120px;
}

.fix_bnr{
    left:10px;
}

.custom_box{
    background-position: left 78% center;
}
.catch {
    width: 103vw;
    top: 45%;
    left: -14%;
}
.custom_logo {
    width: 280px;
    bottom: 88%;
    left: 3%;
}
.intro_title {
    width: 100%;
}

.kotei_wrap{
    line-height:1.5;
}
.qa_type3 .box_q{
	padding: 10px 0 10px 80px;
	background-position: bottom 80px left;
    background-size: 75px;
}
.qa_type3 .box_a{
	padding: 10px 80px 10px 0;
	background-position: bottom 50px right;
    background-size: 70px;
}
.qa_type3 .con_no{
    top: 13px;
}
.qa_type3 .box_txt1:before {
    border-top-width: 12px;
    border-bottom-width: 12px;
    border-left-width: 12px;
    border-right-width: 12px;
    margin-top: -12px;
}
.qa_type3 .box_txt1:after{
    margin-left: -1px;
}
.qa_type3 .box_title1:before {
    border-top-width: 12px;
    border-bottom-width: 12px;
    border-left-width: 12px;
    border-right-width: 12px;
    margin-top: -12px;
}
.qa_type3 .box_title1:after{
    margin-right:-1px;
}
#logo2 {
    width: 300px;
}
}