@charset "UTF-8";
/*===============================================
●mian.css 画面の横幅が770px以上
===============================================*/
@media screen and (min-width: 770px){
#container {
	overflow: hidden;
}
.thought_bg {
    background-image: url(../img/thought/bg_01.jpg);
    background-size: cover;
}
#philosophy_conts {
    margin-bottom: 59px;
    position: relative;
}
#philosophy_conts .illust_01 {
    position: absolute;
    left: 69px;
    top: -22px;
    width: 448px;
    z-index: 99;
}
#philosophy_conts .illust_02 {
    position: absolute;
    left: 309px;
    top: 220px;
    width: 85px;
    z-index: 99;
	animation: horizontal2 3s ease-in-out infinite;
}
#philosophy_conts .illust_02 img {
	animation: vertical2 3s ease-in-out infinite;
}
#philosophy_conts .illust_03 {
    position: absolute;
    left: -180px;
    top: 273px;
    width: 448px;
    z-index: 99;
	animation: horizontal1 1.5s ease-in-out infinite alternate;
	animation-delay: -1s;
}
#philosophy_conts .illust_04 {
    position: absolute;
    right: 0px;
    top: -224px;
    width: 500px;
    z-index: 99;
	animation: horizontal1 1.5s ease-in-out infinite alternate;
    animation-delay: -.8s;
    z-index: -1;
}
#philosophy_conts .illust_05 {
    position: absolute;
    right: 10px;
    top: 218px;
    width: 143px;
    z-index: 99;
}
#philosophy_conts h2 {
    margin-bottom: 33px;
}
#philosophy_conts .img {
    width: 491px;
    margin: 0 auto;
    z-index: 999;
	position: relative;
}
#philosophy_conts .img::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-image:url("../img/thought/bg_04.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	z-index: -1;
	animation: 32s linear infinite rotation;
	position: absolute;
    top: 0;
    left: 0;
}
#policy_conts {
    margin-bottom: 49px;
    position: relative;
}
#policy_conts .illust_01 {
    position: absolute;
    left: 0px;
    top: -204px;
    width: 514px;
    z-index: 99;
    animation: Sway 2s ease-in-out infinite;
    transform-origin: left bottom;
}
#policy_conts .illust_02 {
    position: absolute;
    right: -226px;
    top: -304px;
    width: 714px;
    z-index: 99;
}
#policy_conts .illust_02::before {
    content: "";
    display: block;
    width: 98px;
    height: 109px;
    position: absolute;
    left: 98px;
    bottom: 90px;
	background-image: url("../img/thought/illust_04_bg.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	animation: jumpingY 1.6s infinite linear;
	animation-delay: -.5s;
	z-index: -1;
}
#policy_conts .illust_03 {
    position: absolute;
    left: -10vw;
    bottom: -4vw;
    width: 40vw;
    max-width: 420px;
    z-index: 9999;
}
#policy_conts .illust_03::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
	background-image: url("../img/thought/illust_06.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	animation: jumpingY 1.6s infinite linear;
	z-index: -1;
}
#policy_conts .outer {
    background-image: url(../img/thought/bg_02.png);
    background-size: 880px;
    width: 880px;
    margin: 0 auto;
    height: 682px;
    padding-top: 86px;
    position: relative;
    z-index: 999;
}
#policy_conts .outer h2 {
    margin-bottom: 23px;
}
#policy_conts .outer h3 {
    font-size: 35px;
    line-height: 55px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 19px;
    padding-bottom: 27px;
    background-image: url(../img/thought/part_01.png);
    background-size: 415px;
    background-position: center bottom;
    background-repeat: no-repeat;
}
#policy_conts .outer .text {
    width: 654px;
    margin: 0 auto;
}
#target_conts {
    text-align: center;
}
#target_conts .outer {
    height: 714px;
    background-image: url(../img/thought/bg_03.png);
    background-size: 1214px;
    background-position: center top;
    background-repeat: no-repeat;
}
#target_conts .outer h3 {
    margin: 0 auto;
    width: 526px;
    padding-top: 60px;
	-webkit-animation: horizontal1 1.5s ease-in-out infinite alternate;
}
#target_conts .outer h2 {
margin-bottom: 35px;
    margin-top: -14px;
}
#target_conts .outer ul {
}
#target_conts .outer ul li {
    width: 347px;
    display: inline-block;
    margin: 0 14px;
}
#target_conts .outer ul .img {
    margin-bottom: 13px;
}
#target_conts .outer ul .text {
}
/*=========================
▼▼アニメーション▼▼
===========================*/
@keyframes horizontal1 {
  0% {
    transform: translateY(-18px);
  }
  100% {
    transform: translateY(10px);
  }
}
@keyframes horizontal2 {
  0% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(-10px);
  }
}
@keyframes vertical2 {
  25% {
    transform: translateY(-18px);
  }
  75% {
    transform: translateY(18px);
  }
}
@keyframes rotation {
	0%{ transform:rotate(0);}
	100%{ transform:rotate(360deg);}
}
@keyframes Sway {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(-8deg);}
    100% {transform: rotate(0deg);}
}
@keyframes jumpingY{
    0% {transform: translateY(0) scale(1.0, 1.0);}
    40% {transform: translateY(-28px) scale(1.0, 1.0);}
    75% {transform: translateY(0) scale(1.0, 1.0);}
    90% {transform: translateY(12px) scale(1.05, 0.95);}
    100% {transform: translateY(0) scale(1.0, 1.0);}
}
/*=========================
▲▲アニメーション▲▲
===========================*/
}
/*===============================================
●sp.css  画面の横幅が769pxまで（iPhone6 横向きまで）
===============================================*/
@media screen and (max-width:769px){
.thought_bg {
    background-image: url(../img/thought/bg_01.jpg);
    background-size: cover;
}
#philosophy_conts {
    margin-bottom: 120px;
    position: relative;
}
#philosophy_conts .illust_01 {
    position: absolute;
    left: -14vw;
    top: 0;
    width: 38%;
    z-index: 9;
}
#philosophy_conts .illust_02 {
    position: absolute;
    left: 5vw;
    top: 18vw;
    width: 12%;
    z-index: 99;
	animation: horizontal2 3s ease-in-out infinite;
}
#philosophy_conts .illust_02 img {
	animation: vertical2 3s ease-in-out infinite;
}
#philosophy_conts .illust_03 {
    position: absolute;
    right: -2vw;
    bottom: -10vw;
    width: 38%;
    z-index: 9;
	animation: horizontal1 1.5s ease-in-out infinite alternate;
	animation-delay: -.8s;
}
#philosophy_conts .illust_04 {
    position: absolute;
    right: -10vw;
    top: -24vw;
    width: 42%;
    z-index: 99;
	animation: horizontal1 1.5s ease-in-out infinite alternate;
	animation-delay: -.5s;
}
#philosophy_conts .illust_05 {
    position: absolute;
    right: 10px;
    top: 218px;
    width: 12%;
    z-index: 99;
}
#philosophy_conts h2 {
    margin-bottom: 23px;
}
#philosophy_conts .img {
    width: 90%;
    max-width: 380px;
    margin: 0 auto;
    z-index: 999;
    position: relative;
}
#philosophy_conts .img::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-image:url("../img/thought/bg_04.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	z-index: -1;
	animation: 32s linear infinite rotation;
	position: absolute;
    top: 0;
    left: 0;
}
#policy_conts {
    margin-bottom: 52vw;
    position: relative;
}
#policy_conts .illust_01 {
    position: absolute;
    left: -10vw;
    top: -26vw;
    width: 54%;
    z-index: 999;
    animation: Sway 2s ease-in-out infinite;
    transform-origin: left bottom;
}
#policy_conts .illust_02 {
    position: absolute;
    right: -24vw;
    bottom: -26vw;
    width: 64%;
    z-index: 99;
}
#policy_conts .illust_02::before {
    content: "";
    display: block;
    width: 13vw;
    height: 12vw;
    position: absolute;
    left: 5%;
    bottom: 8%;
	background-image: url("../img/thought/illust_04_bg.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	animation: jumpingY 1.6s infinite linear;
	animation-delay: -.5s;
	z-index: -1;
}
#policy_conts .illust_03 {
    position: absolute;
    left: -5vw;
    bottom: -26vw;
    width: 48%;
    z-index: 9999;
}
#policy_conts .illust_03::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
	background-image: url("../img/thought/illust_06.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	animation: jumpingY 1.6s infinite linear;
	z-index: -1;
}
#policy_conts .outer {
    width: 100%;
    margin: 0 auto;
    padding: 30px 8% 44px;
    position: relative;
    background-color: rgba(253,252,226,0.94); 
    box-shadow:6px 6px 0px 1px rgba(0,0,0,0.1);
    z-index: 99;
}
#policy_conts .outer::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid #f39800;
    position: absolute;
    left: -6px;
    top: -6px;
}
#policy_conts .outer h2 {
    margin-bottom: 16px;
}
#policy_conts .outer h3 {
    font-size: 2rem;
    line-height: 1.6;
    text-align: center;
    font-weight: bold;
    margin-bottom: 19px;
    padding-bottom: 20px;
    background-image: url(../img/thought/part_01.png);
    background-size: 70%;
    background-position: center bottom;
    background-repeat: no-repeat;
}
#policy_conts .outer .text {
    
}
#target_conts {
    text-align: center;
}
#target_conts .outer {
    height: 100%;
    padding: 15vw 5% 20px;
    background-color: #fdfce2;
    border-radius: 15px;
    position: relative;
    z-index: 9;
}
#target_conts .outer::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 10px;
    background-color: #fdfce2;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#target_conts .outer::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 10px;
    background-image: url(../img/thought/ptn_01.png);
    background-size: 4.2vw;
    background-position: center bottom;
    background-repeat: repeat;
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: -9;
}
#target_conts .outer h3 {
    width: 94%;
    position: absolute;
    top: -8vw;
    left: 3%;
	animation: horizontal1 1.5s ease-in-out infinite alternate;
}
#target_conts .outer h3::before {
    content: "";
    width: 90%;
    height: 23vw;
    display: block;
    background-image: url(../img/thought/bg_03_sp.png);
    background-size: 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -1;
    top: -8vw;
    left: 5%;
	animation: reHorizontal1 1.5s ease-in-out infinite alternate;
}
#target_conts .outer h2 {
    margin-bottom: 20px;
    margin-top: -14px;
}
#target_conts .outer ul {
}
#target_conts .outer ul li {
    width: 100%;
    max-width: 380px;
    margin: 0 auto 36px;
}
#target_conts .outer ul .img {
    margin-bottom: 10px;
}
#target_conts .outer ul .text {
}
/*=========================
▼▼アニメーション▼▼
===========================*/
@keyframes horizontal1 {
  0% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(4px);
  }
}
@keyframes horizontal2 {
  0% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(-10px);
  }
}
@keyframes vertical2 {
  25% {
    transform: translateY(-14px);
  }
  75% {
    transform: translateY(14px);
  }
}
@keyframes rotation {
	0%{ transform:rotate(0);}
	100%{ transform:rotate(360deg);}
}
@keyframes Sway {
    0% {transform: rotate(0);}
    50% {transform: rotate(-10deg);}
    100% {transform: rotate(0);}
}
@keyframes jumpingY{
    0% {transform: translateY(0) scale(1.0, 1.0);}
    40% {transform: translateY(-16px) scale(1.0, 1.0);}
    75% {transform: translateY(0) scale(1.0, 1.0);}
    90% {transform: translateY(14px) scale(1.05, 0.95);}
    100% {transform: translateY(0) scale(1.0, 1.0);}
}
@keyframes reHorizontal1 {
  0% {
    transform: translateY(4px);
  }
  100% {
    transform: translateY(-12px);
  }
}
/*=========================
▲▲アニメーション▲▲
===========================*/
}