@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

html, body, div, span, p, a, address, img, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	padding: 0px;
	border:none;
}

html{
	font-size: 62.5%;
	font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    /*font-family: "Josefin Sans", sans-serif;*/
}

a{
	text-decoration:none;
}

body{
    background-color: #FFF;
}



/*==================================================
スライダーのためのcss
===================================*/
.usr_slidebox{
    padding-top:100px;
    margin: 0 auto;
    width: 100%;
    height: auto;
    
    background-position: center;
    box-sizing: border-box;
    line-height: 0;
    
}


.slick-list {
	overflow: visible !important;
}

.usr_slider {
    overflow: hidden;
    position:relative;
    line-height: 0;
	z-index: 1;
    width: 100%;
    height: auto;
    margin: 0 auto;
    font-size: 0;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	/*height: 100vh;+/
    /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

.usr_mw960{
    width: 94%;
    max-width: 1280px !important;
    padding-top: 0 !important;
    z-index: auto;
}

.usr_slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    /*height:100vh;各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    text-align: center;
}

.usr_slider-item img{
    width: 100%;
}




@keyframes zoomUp1 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.usr_slider-item01.add_ani {
  animation: zoomUp1 4s 0s forwards ease-in-out;
}

@keyframes zoomUp2 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.usr_slider-item02.add_ani {
  animation: zoomUp2 3s 0s forwards ease-in-out;
  transform-origin: left;
}

@keyframes zoomUp3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.usr_slider-item03.add_ani {
  animation: zoomUp3 3s 0s forwards ease-in-out;
  transform-origin: right;
}

@keyframes zoomOut1 {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.usr_slider-item04.add_ani {
  animation: zoomOut1 3s 0s forwards ease-in-out;
  transform-origin: left;
}



/* フェードアニメーションここから */

/* 左上へ */
.usr_flipLeftTopTrigger,
.usr_fadeUpTrigger,
.usr_fadeDownTrigger,
.usr_fadeLeftTrigger{
    opacity: 0;
}

.usr_flipLeftTop{
animation-name:usr_flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes usr_flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
  opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
  opacity: 1;
  }
}

.usr_fadeUp{
animation-name:usr_fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes usr_fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.usr_fadeDown{
animation-name:usr_fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes usr_fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


.usr_fadeLeft{
animation-name:usr_fadeLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes usr_fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/*枠線が伸びて出現*/

.usr_lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.usr_lineTrigger.usr_lineanime{
  animation-name:lineAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.usr_lineTrigger::before,
.usr_lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:#172B91;/* 枠線の色*/
}

/*左右線*/
.usr_line2::before,
.usr_line2::after{
  position: absolute;
  content:"";
  width: 10px;
  height:0;
  background:#172B91;/* 枠線の色*/
}

/*上線*/
.usr_lineTrigger::before {
  top:0;
  left:0;
}

.usr_lineTrigger.usr_lineanime::before {
  animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.usr_line2::before{ 
  top:0;
  right:0;
}

.usr_lineTrigger.usr_lineanime .usr_line2::before {
  animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.usr_lineTrigger::after { 
  bottom:0;
  right:0;
}

.usr_lineTrigger.usr_lineanime::after {
  animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.usr_line2::after{ 
  bottom:0;
  left:0;
  background-color: #172B91;
}

.usr_lineTrigger.usr_lineanime .usr_line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
  0% {height:0%;}
    100%{height:100%;}
}


.usr_delay-time05{  
  animation-delay: 0.5s;
}

.usr_delay-time1{  
  animation-delay: 1s;
}

.usr_delay-time15{  
  animation-delay: 1.5s;
}

.usr_delay-time2{  
  animation-delay: 2s;
}

.usr_delay-time25{  
  animation-delay: 2.5s;
}

/* フェードアニメーションここまで */

.usr_SP_img {
	display: none;
}



div#usr_wrapper{
	width:100%;
	height:auto;
    overflow: hidden;
}




h1{
    width: 50%;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
}

h1 img{
    width: 100%;
    max-width: 450px;
}

div#usr_menu{
	width:100%;
	background-color: #FFF;
	background-repeat:repeat-x;
	position:fixed;
	top:0px;
	z-index:999;
    border: none;
}

div#usr_menu p{
	width:100%;
	height:100px;
	margin:0px auto;
}

div#usr_menu img.usr_menu01{
	width:320px;
	height:100px;
	margin:0px 0px 0px 0px;
	position:absolute;
	top:0;
	left:0;
}

div#usr_menu img.usr_menu02{
	width:160px;
	height:100px;
	margin:0px;
	position:absolute;
	top:0;
	right:160px;
}

div#usr_menu img.usr_menu03{
	width:160px;
	height:100px;
	margin:0px;
	position:absolute;
	top:0;
	right:0px;
}

#usr_menu p a img:hover{
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)";
}

div#usr_contents{
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}


/* キャッチ */

.usr_maintext-box {
  position: absolute;
  top: 50px;
  left: 50%;
  width: 90%;
  
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  z-index: 2;
}

.usr_maintext-box p.usr_catch{
    width: 100%;
    
    text-align: center;
    margin:0 auto;
    
}

.usr_maintext-box p.usr_catch img{
    width: 100%;
    
}

.usr_mb{
    margin-bottom: 4rem !important ;
}

.usr_mb2{
    margin-bottom: 6rem !important ;
}

div.usr_white{
    width: 100%;
    margin: 0 auto;
    padding: 6rem 0;
    background-color: #FFF;
    
}

div.usr_white2{
    width: 100%;
    margin: 0 auto;
    padding: 0 0 6rem 0;
    background-color: #FFF;
    
}

.usr_w90{
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
}



div.usr_gray{
    width: 100%;
    margin: 0 auto;
    padding: 6rem 0;
    background-color: #F6F6F6;
}

div.usr_bg1{
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 6rem 0;
    background-color: #957123;
    background-image: url("../img/bg2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

div.usr_title1{
    width:90%;
    max-width: 1280px;
	margin:4rem auto;
    text-align: center;
   
}


div.usr_title1 span{
    background: linear-gradient(transparent 0%, transparent 60%, #E60012 60%, #E60012 100%);
    
	text-align:center;
	line-height:160%;
	font-size: 8rem;
	letter-spacing:1px;
	color:#000;
    
    
    font-weight: 500;
}

p.usr_title1{
    width: 50%;
    
    margin:3rem auto 0 auto;
    text-align: center;
}

p.usr_title1 img{
    width: 100%;
    max-width: 640px;
}

p.usr_text1{
     width:90%;
    max-width: 960px;
	margin:0 auto;
	text-align:left;
	line-height:220%;
	font-size: 1.7rem;
	letter-spacing:1px;
	color:#000;
    font-weight: 500;
}



p.usr_text2{
    width:90%;
    max-width: 1028px;
	margin:0 auto 2rem auto;
	text-align:center;
	line-height:200%;
	font-size: 2.2rem;
	letter-spacing:1px;
	color:#957123;
    font-weight: 600;
}


p.usr_image1{
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

div.usr_human1,div.usr_human2,div.usr_human3,div.usr_human4{
    width: 100%;
    margin: 0 auto;
}

p.usr_image2{
    width: 100%;
    background-color: #E1DED5;
    background-image: url("../img/bg3.png");
    background-repeat: repeat;
    margin: 0 auto;
    text-align: center;
    
}

p.usr_image1 img,p.usr_image3 img{
    width: 100%;
}

p.usr_image2 img{
    width: 100%;
    max-width: 960px;
}

p.usr_image3{
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
    text-align: center;
}

p.usr_text3{
    width:100%;
    max-width: 1028px;
	margin:2rem auto 0 auto;
	text-align:left;
	line-height:200%;
	font-size: 1.6rem;
	letter-spacing:1px;
	color:#454554;
    font-weight: 500;
}



div.usr_title2{
    width:90%;
    max-width: 960px;
	margin:0 auto;
	text-align:center;
	line-height:160%;
	font-size: 4rem;
	letter-spacing:1px;
	color:#000;
    font-weight: 600;
    box-sizing: border-box;
    
}

div.usr_title2 span{
    /*background: linear-gradient(transparent 0%, transparent 70%, #000 70%, #000 70%);*/
    font-size: 10rem;
    font-weight: 600;
    
    color:#E60012;
    line-height:200%;
}

div.usr_prof{
    width: 60%;
    max-width: 760px;
    text-align: left;
    margin: -80px auto 40px auto;
    padding: 3rem 2rem;
    box-sizing: border-box;
    background-color: rgba(229,0,18,0.8);
    z-index: 99;
}

p.usr_name1{
    line-height:200%;
	font-size: 2.4rem;
	letter-spacing:1px;
	color:#FFF;
    font-weight: 600;
    border-bottom: 1px solid #FFF;
    padding-bottom: 0.5rem;
}

p.usr_name2{
    line-height:180%;
	font-size: 1.6rem;
	letter-spacing:1px;
	color:#FFF;
    font-weight: 400;
    margin-top: 0.5rem;
}

p.usr_title3{
	margin:0 auto;
	text-align:left;
    padding-left: 40px;
	line-height:180%;
	font-size: 2.4rem;
	letter-spacing:1px;
	color: #FFF;
    font-weight: 600;
}

div.usr_midashi{
    width: 90%;
     max-width: 1024px;
    background-color: #000;
    margin: 0 auto;
    border-left: 30px solid #E60012;
    padding: 2rem;
    box-sizing: border-box;
    text-align: center;
}

p.usr_text4{
    width:90%;
    max-width: 960px;
	margin:0 auto;
	text-align:center;
	line-height:200%;
	font-size: 2rem;
	letter-spacing:1px;
	color:#FFF;
    font-weight: 500;
    background-color: #957123;
    padding: 2rem 0;
}

p.usr_text5{
    width:90%;
    max-width: 960px;
	margin:0 auto;
	text-align:left;
	line-height:220%;
	font-size: 1.7rem;
	letter-spacing:1px;
	color:#454545;
    font-weight: 500;
}


div.usr_bt_open{
    width: 50%;
    margin: 0px auto;
    text-align: center;
}

div.usr_bt_open img{
    width: 100%;
    max-width: 260px;
    cursor: pointer;
}

.usr_txtal{
    text-align: left !important;
}


.usr_pt0{
    padding-top: 0px !important;
}



.usr_mojikan{
    letter-spacing: 0px;
}

.usr_pb0{
    padding-bottom: 0 !important;
}

p.usr_txtwhite{
    color: #FFF !important;
     text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}

div.usr_button_box{
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    margin: 6rem auto;
    
}

div.usr_button1{
    background-color: #E60012;
}

div.usr_button2{
    background-color: #AC000D;
    /*background-image: url("../img/icon_blank.png");
    background-repeat: no-repeat;
    background-position: center right 3rem;*/
}


div.usr_button1,div.usr_button2{
    position: relative;
    width: 45%;
    max-width: 460px;
    text-align:center;
	line-height: 100%;
	font-size: 2rem;
	letter-spacing:0.3rem;
    color: #FFF;
    font-weight: 400;
    margin: 0rem 2rem;
    padding: 4rem;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
}

div.usr_button1 a,div.usr_button2 a{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

div.usr_button1:hover,div.usr_button2:hover{
    opacity: 0.7;
}

p#usr_copy{
	width:100%;
	height:100px;
	margin:0px auto;
	text-align: center;
	line-height: 100px;
	font-size: 13px;
	letter-spacing:2px;
	color:#FFF;
	background-color:#000;
    font-weight: 500;
}

div#usr_top{
	display:none;
	position:fixed;
	bottom:120px;
	right:20px;
	z-index:100;
}





@media screen and (max-width: 760px) {
	
.usr_SP_img {
	display: block;
}
    
.usr_PC_img{
	display:none;
}
    
.usr_slidebox{
    padding-top:15.625%;
    margin: 0 auto;

}
    
.usr_maintext-box {
  top:10%;
  width: 90%;
  
}
    
.usr_maintext-box p.usr_catch{
    margin: 0 auto;
}

div#usr_menu p{
	width:100%;
	height:15.625%;
	margin:0px auto;
    
}

div#usr_menu img.usr_menu01{
	width:50%;
	height:15.625%;
	margin:0px;
	position:relative;
	top:0;
	left:0;
}

div#usr_menu img.usr_menu02,div#usr_menu img.usr_menu03{
	width:25%;
	height:15.625%;
	margin:0px;
	position:relative;
	top:0;
	left:0;
}

#usr_menu p a img:hover{
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
}
    
div.usr_white,div.usr_gray,div.usr_bg1,div.usr_bg2{
    padding: 4rem 0;
}
    
div.usr_white2{
    width: 100%;
    margin: 0 auto;
    padding: 0 0 4rem 0;
    background-color: #FFF;
    
}
    
.usr_mb{
    margin-bottom: 3rem !important ;
}
    
.usr_mb2{
    margin-bottom: 4rem !important ;
}
    
p.usr_title1{
	margin:1rem auto 0 auto;
    
	text-align:center;
	line-height:160%;
	font-size: 1.8rem;
	letter-spacing:0px;
}
    


p.usr_text1{
	text-align:left;
	line-height:200%;
	font-size: 1.5rem;
	letter-spacing:1px;
    font-weight: 400;
}
    
div.usr_works{
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    gap:2rem;
    display: flex;
    flex-direction: column;
}

div.usr_works div{
    align-items: center;
    width: 100%;
    padding: 2rem;
    background-color: #E1DED5;
    margin: 0 auto;
}
    
p.usr_text2{
	line-height:160%;
	font-size: 1.5rem;
	letter-spacing:1px;
    font-weight: 600;
}
    
p.usr_text3,p.usr_text5{
	line-height:160%;
	font-size: 1.4rem;
	
}
    
div.usr_title2{
	margin:0 auto;
	text-align:center;
	line-height:160%;
	font-size: 1.6rem;
	letter-spacing:0px;
    
    
}
    
div.usr_title2 span{
    /*background: linear-gradient(transparent 0%, transparent 70%, #000 70%, #000 70%);*/
    font-size: 4rem;
    
}

p.usr_text4{
    width:90%;
    max-width: 960px;
	margin:0 auto;
	text-align:center;
	line-height:200%;
	font-size: 1.5rem;
	letter-spacing:1px;
	color:#FFF;
    font-weight: 500;
    padding: 1rem 0;
}
    
div.usr_image{
    margin: 3rem auto;
}
    


p.usr_image2{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
    
}
    
.usr_mojikan{
    letter-spacing: 1px;
}
    

    
p.usr_title3{
	font-size: 1.5rem;
    letter-spacing: 0px;
    text-align: center;
    padding-left: 0;
}
    
div.usr_prof{
    width: 70%;
    margin: -40px auto 30px auto;
    padding: 1.5rem;
    
}

p.usr_name1{
    line-height:200%;
	font-size: 1.6rem;
	letter-spacing:1px;
	color:#FFF;
    font-weight: 600;
    padding-bottom: 0.5rem;
}

p.usr_name2{
    line-height:180%;
	font-size: 1.4rem;
	
    margin-top: 0.5rem;
}

 
div.usr_button_box{
    width: 100%;
    flex-direction: column;
    align-content: center;
    margin: 0 auto;
}

div.usr_button1,div.usr_button2{
    position: relative;
    width: 80%;
    max-width: 80%;
    text-align:center;
	line-height: 1;
	font-size: 1.3rem;
	letter-spacing: 0rem;
    margin: 1rem auto;
    padding: 3rem 1rem;
    box-sizing: border-box;
}

div.usr_button1:hover,div.usr_button2:hover{
    opacity: 1;
}

p#usr_copy{
	width:100%;
	height:80px;
	margin:0px auto;
	line-height: 80px;
	font-size: 10px;
	letter-spacing:1px;
}


    
}