body {
    font-family: 'Roboto', "Noto Sans JP", YuGothic,"Yu Gothic","游ゴシック体","游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic","Helvetica Neue",Helvetica,Arial,sans-serif;
}
/* ======================================================================================
　　color
======================================================================================== */
.linkStyle{color: #2594c6;transition: opacity .3s;text-decoration: underline;}
.linkStyle:hover{opacity: 0.7}

:root {
    --normal_color: #333333;
    --color1: #2594c6; /* メインカラー */
    --color2: #d0ebf9; /* サブカラー */
    --color3: #f3aa19; /* アクセントカラー1*/
    --color4: #ececec; /* アクセントカラー2*/
    --color5: #2b7395;
}
.txt{
	color: var(--normal_color);
}
.contents_txt {
    color: #fff;
}
#top_info h2 {
    background-color: var(--color5);
}


/* ======================================================================================
　　all
======================================================================================== */
.intro_wrap {
	position: relative;
}
.main_catch_box::before, .intro_wrap::before {
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;
}

/* ---------- header ---------- */


/* ---------- footer ---------- */
#f_contact .con_txt {
    font-size: 37px;
    color: #fff;
    background-image: url(../dup/img/line1.png);
    background-position: center bottom;
    background-size: 159px;
    background-repeat: no-repeat;
    padding-bottom: 21px;
}


/* ======================================================================================
　　animation
======================================================================================== */

.puka {animation: puka 3s infinite ease-in-out .8s alternate;}
@keyframes puka {
	0% {transform:translate(0, 0) rotate(-2deg);}
	50% {transform:translate(0, -15px) rotate(0deg);}
	100% {transform:translate(0, 0) rotate(2deg);}
}

.fuwafuwa {animation: 3s fuwafuwa infinite;}
@keyframes fuwafuwa {
  0%, 100% {transform: translateY(0);}
  50% {transform: translateY(-20px);}
}

.load_anim {
	opacity: 0;
}
.load_anim.start, .txt_anim.start {
	animation: poyoyon 1s ease-in-out 1 forwards;
}
.main_item1.load_anim {
    animation-delay: 0.2s;
}
.main_catch_box .load_anim {
    animation-delay: .4s;
}
@keyframes poyoyon {
0% {
    opacity: 0;
    transform: translateY(50px) scale3d(0.5, 0.5, 0.5);
  }
  40% {
    opacity: 1;
    transform: translateY(-20px) scale3d(1, 1, 1);
  }
  70% {
    opacity: 1;
    transform: translateY(5px) scale3d(1, 1, 1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale3d(1, 1, 1);
  }
 
}

/* ======================================================================================
　　top
======================================================================================== */

/* ---------- main_img ---------- */
.main_catch_box {
    z-index: 2;
    top: 19%;
    right: 0;
    left: 12vw;
    max-width: 635px;
    width: 40vw;
    text-align: center;
}
.main_catch_box::before {
    background-image: url(../dup/img/main_catch_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: calc(100% + 200px);
    height: calc(100% + 200px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    z-index: -1;
}
.main_catch_box p {
    display: inline-block;
    text-align: left;
    padding: 29px 0 33px;
    line-height: 1.7;
}
.main_catch {
    margin: auto;
}
.main_catch2 {
    margin: auto;
}

.main_item1 {
    right: 6vw;
    top: 9%;
    width: 39.5vw;
}
.main_item2 {
    top: 10%;
    right: 2vw;
    width: 13vw;
}

.awa {
    z-index: 2;
    transform: translate(0px, 0px);
}
.awa img {
    position: absolute;
    left: 0;
    top: 0;
    height: auto !important;
    width: 100% !important;
    transition: top 1s ease-out;
}
.awa1 {
    width: 5vw;
    left: 15vw;
    margin-top: 53%;
}
.awa2 {
    left: 28vw;
    width: 1.25vw;
    margin-top: 49%;
}
.awa3 {
    right: 11vw;
    width: 0.8vw;
    margin-top: 37.5%;
}
.awa4 {
    right: 7vw;
    width: 4.5vw;
    margin-top: 47%;
}
.awa5 {
    right: 16vw;
    width: 1.7vw;
    margin-top: 60%;
}
.awa6 {
    left: 5vw;
    width: 2vw;
    margin-top: 60%;
}

/* ---------- intro ---------- */
.intro_wrap {
    background-image: url(../dup/img/bg1.jpg);
    background-size: cover;
    /* background-attachment: fixed; */
    background-position: top;
}
#intro .intro_bg, #intro .bg_box {
    width: 0;
}
.con_item0 {
    top: 11%;
    left: 40px;
    width: 4vw;
}
#intro h2 {
    background-image: url(../dup/img/line1.png);
    background-position: left bottom;
    background-size: 159px;
    background-repeat: no-repeat;
    padding-bottom: 30px;
}
#intro .btn1 {
    max-width: 362px;
    width: 80%;
    margin: 28px 0 0 -13px;
}

#intro .img_wrap {
    position: absolute;
    right: 0;
    width: 48%;
}
#intro .obje_rectangle{
	padding-top: 47%;
	position: absolute;
}
#intro .obje_square{
	padding-top: 100%;
    position: relative;
}
#intro .obje_rectangle img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
}
/*.con_item1 {
    z-index: 2;
    width: 11vw;
    bottom: 6%;
    left: -5%;
}
.con_item1 img {
    position: static!important;
}*/

/* ---------- contents ---------- */
#contents1 .img_box {
    z-index: 1;
}
#contents1 .con_item2 {
    z-index: 2;
    top: -20px;
    left: 0;
    right: 0;
    margin: auto;
    width: 47vw;
    max-width: 624px;
}
#contents1 .flex_center {
    align-items: flex-start;
}
#contents1 .txt_box {
    padding-top: 115px;
}
#contents1 h2 {
    color: #fff;
    background-image: url(../dup/img/line1.png),url(../dup/img/con_no1.png);
    background-position: left bottom, top left;
    background-size: 159px, 80px;
    background-repeat: no-repeat;
    padding-bottom: 30px;
    padding-top: 66px;
}
#contents2 h2 {
    color: #fff;
    background-image: url(../dup/img/line1.png),url(../dup/img/con_no2.png);
    background-position: center bottom, top center;
    background-size: 159px, 80px;
    background-repeat: no-repeat;
    padding-bottom: 30px;
    padding-top: 66px;
}
.intro_wrap::before {
    width: 18vw;
    height: 15vw;
    background-image: url(../dup/img/con_item3.png);
    background-size: contain;
    background-repeat: no-repeat;
    right: 19px;
    bottom: -5%;
    z-index: 3;
}

#top_info {
    background-image: url(../dup/img/bg1.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: top;
    color: #fff;
}
#top_info a{
    color: #fff;
}




/* ======================================================================================
　　under
======================================================================================== */

/* ---------- cms1 ---------- */


/* ---------- cms2 ---------- */






/* ======================================================================================
　　window size
======================================================================================== */

@media screen and (max-width: 1535px){
#intro .width_1280-max {
    padding-left: 2vw;
}
}
@media screen and (max-width: 1500px){
#intro .width_1280-max {
    padding-left: calc(3vw + 4vw);
}
}
@media screen and (max-width: 1297px){
#intro .width_1280-max {
    padding-left: calc(5vw + 4vw);
}
#intro .obje_rectangle {
    padding-top: 58%;
}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#main_img2 {
    margin-top: 85px;
}
.main_catch_box {
    top: 9%;
    left: 6vw;
    max-width: 635px;
    width: 45vw;
}
.main_catch {
    max-width: 300px;
}
.main_catch_box p {
    font-size: 14px;
    padding: 21px 0 17px;
}
.main_catch2 {
    max-width: 327px;
}

.con_item0 {
    top: 8%;
}
#intro .obje_rectangle {
    position: relative;
}
#intro .btn1 {
    max-width: 304px;
    margin: 29px auto 20px;
    transform: translateX(-19px);
}

#contents1 .flex_center {
    padding-left: 0;
}
#contents1 .txt_box {
    padding-top: 38px;
    width: 100%!important;
}
#contents1 .img_box {
    width: 70.66667%;
}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
#pc_nav,.main_item2 {
    animation: none!important;
    opacity: 1;
}

#main_img2 {
    margin-top: 64px;
}
.main_item1 {
    right: -1vw;
    top: auto;
    width: 66vw;
    bottom: 0;
}
.main_item2 {
    top: 6%;
    right: 2vw;
    width: 21vw;
}
.main_catch_box {
    top: 6%;
    left: 0;
    right: 0;
    max-width: 635px;
    width: 80%;
    margin: auto;
}
.main_catch_box p {
    font-size: 12px;
    padding: 12px 0 7px;
}

#intro .width_1280-max {
    padding-left: 20px;
}
.con_item0 {
    top: 2%;
    left: 0;
    right: 0;
    width: 82%;
    margin: auto;
}
#intro .btn1 {
    max-width: 304px;
    transform: none;
    width: 96%;
}

#contents1 .flex_center {
    padding-left: 0;
    padding: 0 45px;
}
#contents1 .con_item2 {
    top: -7px;
    width: 100%;
}
.intro_wrap::before {
    width: 29vw;
    height: 27vw;
    right: 11px;
    bottom: -1%;
    z-index: 3;
}
#contents1 h2 {
    background-position: center bottom, top center;
    text-align: center;
}

#contents2 h2 {
    font-size: 22px;
}

#f_contact .con_txt {
    font-size: 17px;
    background-size: 116px;
}
}