@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&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: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-family: 'Kiwi Maru', serif;
}

body{
    background-color: #FFF;
}

div#usr_contents{
	padding-top:100px;
}

.usr_SP_img {
	display: none;
}

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


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

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)";
}

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

/* 左上へ */
.usr_flipLeftTopTrigger,
.usr_fadeUpTrigger,
.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_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_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_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:3px;
  background:#000;/* 枠線の色*/
}

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

/*上線*/
.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: #023894;
}

.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%;}
}

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


div#usr_contents{
    padding-top: 100px;
}


div#usr_mainbox{
    width: 100%;
    height: auto;
    margin: 0px auto;
    background-image: url("../img/bg_main.png");
    background-repeat: no-repeat;
    background-size: cover;
}

div#usr_main{
    width: 100%;
    margin: 0 auto;
    height: auto;
    text-align:center;
}

div#usr_main img{
    width: 100%;
    max-width: 1480px;
}

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

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

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

div.usr_voice1{
    width: 100%;
    background-image: url("../img/bg_voice.jpg");
    background-repeat: repeat;
    margin: 0 auto;
    padding: 6rem 0;
}

.usr_overauto{
    overflow: auto;
}

div.usr_flex1,div.usr_flex2{
    display: flex;
    width: 80%;
    max-width: 960px;
    margin: 4rem auto;
    align-items: center;
    justify-content: center;
}

div.usr_flex3{
    display: flex;
    width: 80%;
    max-width: 960px;
    margin: 4rem auto;
    align-items: center;
    justify-content: center;
    background-color: #FF7373;
    padding: 3rem;
}

div.usr_voicephoto{
    width: 25%;
    margin: 0;
    text-align: center;
}

div.usr_voicephoto img{
    max-width: 240px;
    margin: 0;
}

div.usr_voicephoto2{
    width: 25%;
    margin-right: 5%;
    text-align: center;
}

div.usr_voicephoto2 img{
    max-width: 240px;
    margin: 0;
}

div.usr_voiceborder{
    width: 5%;
    height: 3px;
    margin: 0;
    background-color: #000;
}

div.usr_voicetxt{
    width: 70%;
    background-color: #FFDC73;
    border: 3px solid #000;
    margin: 0;
    padding: 2rem;
    box-sizing: border-box;
}

div.usr_voicetxt2{
    width: 70%;
    background-color: #FFDC73;
    border: 3px solid #000;
    margin: 0;
    padding: 2rem;
    box-sizing: border-box;
}

div.usr_voicetxt3{
    width: 70%;
    color:#FFF !important;
    margin: 0;
    padding: 2rem;
    box-sizing: border-box;
}

p.usr_photo{
    width: 80%;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

p.usr_photo img{
    width: 100%;
}

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

.usr_w80{
    width: 80%;
    max-width: 960px;
    margin: 0 auto;
}

p.usr_title1{
    width:80%;
    max-width: 960px;
	margin:0 auto;
	text-align:center;
	line-height:160%;
	font-size: 3.4rem;
	letter-spacing:2px;
	color:#000;
    padding: 2rem 0;
}

p.usr_title2{
    width:80%;
    max-width: 960px;
	margin:0 auto;
	text-align:center;
	line-height:160%;
	font-size: 3.4rem;
	letter-spacing:2px;
	color:#FFF;
    padding: 2rem 0;
}

p.usr_title3{
    width:80%;
    max-width: 960px;
	margin:0 auto;
	text-align:center;
	line-height:160%;
	font-size: 2rem;
	letter-spacing:1px;
	color:#FFF;
    padding: 1.5rem;
    background-color: #000;
}

p.usr_title4{
    width:80%;
    max-width: 960px;
	margin:1rem auto;
	text-align:center;
	line-height:160%;
	font-size: 2rem;
	letter-spacing:1px;
	color:#FF7373;
    padding: 1rem;
    background-color: #FFF;
}

p.usr_text1{
    width:90%;
    max-width: 960px;
	margin:0 auto;
	text-align:left;
	line-height:200%;
	font-size: 18px;
	letter-spacing:1px;
	color:#454545;
}



p.usr_text2{
    width:90%;
    max-width: 960px;
	margin:20px auto;
	text-align:left;
	line-height:200%;
	font-size: 14px;
	letter-spacing:1px;
	color:#000;
}

p.usr_text3{
    width:90%;
    max-width: 960px;
	margin:20px auto;
	text-align:center;
	line-height:200%;
	font-size: 22px;
	letter-spacing:1px;
	color:#000;
}

p.usr_text4{
    width:90%;
    max-width: 960px;
	margin:0 auto;
	text-align:left;
	line-height:230%;
	font-size: 20px;
	letter-spacing:1px;
	color:#454545;
}

img.usr_fl2{
    width: 100%;
    max-width: 260px;
    margin: 0 4rem 4rem 0;
    float: left;
}

.usr_cb{
    clear: both;
}

div.usr_clear:after {
　content: "";
　display: block;
　clear: both;
}

div.usr_title1 span{
    background: linear-gradient(transparent 0%, transparent 60%, #00B8FF 60%, #00B8FF 100%);
    font-weight: bold;
}

div.usr_voice{
    clear: both;
    width: 80%;
    max-width: 840px;
    margin: 3rem auto;
    background-color: #698C00;
    padding: 2rem;
}

div.usr_voice p{
    width:100%;
	margin:0 auto;
	text-align:left;
	line-height:200%;
	font-size: 18px;
	letter-spacing:0px;
	color:#FFF;
}

div.usr_voice p span{
    border: 1px dashed #FFF;
    padding: 1rem;
    border-radius: 1rem;
    line-height: 320%;
    margin:0 auto;
}

div.usr_voice img.usr_fl{
    width: 30%;
    max-width: 120px;
    float: left;
    margin: 1rem 3rem 5rem 0;
}

p.usr_logo{
    width: 60%;
    max-width: 500px;
    text-align: center;
    margin: 0 auto;
}

p.usr_logo img{
    width: 100%;
}

p#usr_copy{
	width:100%;
	height:100px;
	margin:0px auto;
	text-align: center;
	line-height: 100px;
	font-size: 13px;
	letter-spacing:5px;
	color:#FFF;
	/*background: linear-gradient(-90deg, rgb(105, 140, 0), rgb(0, 120, 74));*/
    background-color: #FF7373;
}

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

div.usr_button_box{
    width: 80%;
    max-width: 960px;
    display: flex;
    align-content: center;
    justify-content: center;
    margin: 0 auto 3rem auto;
}

div.usr_button1{
     background-color:#FF9326;
    /*background: linear-gradient(90deg, rgb(56, 147, 237), rgb(0, 85, 159));*/
}

div.usr_button2{
    background-color:#FF7373;
    /*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;
    
    margin: 0rem 2rem;
    padding: 4rem;
    border-radius: 2rem;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
}

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;
}

div.usr_moviebox{
    width: 100%;
    margin: 0 auto;
}

div.usr_moviebox p{
    width: 80%;
    max-width: 960px;
    margin:0 auto 4rem auto;
    text-align: center;
	line-height: 200%;
	font-size: 3rem;
	letter-spacing:2px;
	color:#003183;
    font-weight: 600;
    background-color: #FFF;
    padding: 2rem;
    box-sizing: border-box;
    border-radius: 20px;
}

div.usr_moviebox div.usr_video{
    width: 100%;
    margin:0 auto;
    text-align: center;
}

div.usr_moviebox div.usr_video video{
    width: 80%;
    max-width: 960px;
}

.usr_txtwhite{
    color: #FFF !important;
}


@media screen and (max-width: 960px) {
    
.usr_SP_img {
	display: block;
}
	
.usr_PC_img{
	display:none;
}

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_contents{
	padding-top:15.625%;
}

div#usr_mainbox{
    width: 100%;
    height: auto;
    margin: 0px auto;
    background-image:none;
}
    
div.usr_moviebox{
    width: 100%;
    margin: 0 auto;
}

div.usr_moviebox p{
    width: 80%;
    margin:0 auto 3rem auto;
    text-align: center;
	font-size: 1.8rem;
	letter-spacing:1px;
    padding: 1.5rem;
    box-sizing: border-box;
    border-radius: 20px;
}
    
div.usr_flex1{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 960px;
    margin: 3rem auto;
}
    
div.usr_flex2{
    display: flex;
    flex-direction:column-reverse;
    width: 100%;
    max-width: 960px;
    margin: 3rem auto;
}
    
div.usr_flex3{
    display: flex;
    flex-direction: column;
    width: 80%;
    max-width: 960px;
    margin: 3rem auto;
}
    


div.usr_voicephoto,div.usr_voicephoto2{
    width: 60%;
    margin: 0 auto;
    text-align: center;
}

div.usr_voicephoto img{
    max-width: 240px;
    margin: 0;
}

div.usr_voiceborder{
    display: none;
}
    
}


@media screen and (max-width: 760px) {

div.usr_white,div.usr_gray,div.usr_bg,div.usr_orange,div.usr_voice1{
    width: 100%;
    margin: 0 auto;
    padding: 4rem 0;
}
    
.usr_mb{
    margin-bottom: 3rem !important;
}

p.usr_title1,p.usr_title2{
    width:80%;
    max-width: 960px;
	text-align:center;
	line-height:160%;
	font-size: 1.8rem;
	letter-spacing:0px;
    padding: 1.5rem 0;
}
    
p.usr_title3,p.usr_title4{
    width:80%;
    max-width: 960px;
	text-align:center;
	line-height:160%;
	font-size: 1.4rem;
	letter-spacing:0px;
    padding: 1rem;
}
    
p.usr_title4{
    width: 90%;
}

p.usr_text1,p.usr_text2,p.usr_text3,p.usr_text4{
    width:80%;
	margin:0rem auto;
	
	line-height:180%;
	font-size: 1.4rem;
	letter-spacing:1px;
}
    
div.usr_voice{
    clear: both;
    margin: 2rem auto;
    padding: 2rem;
}

div.usr_voice p{
    width:100%;
	margin:0 auto;
	line-height:200%;
	font-size: 14px;
	letter-spacing:0px;
	color:#FFF;
}
    
div.usr_voice p span{
    border: 1px dashed #FFF;
    padding: 0.5rem;
    border-radius: 1rem;
    line-height: 320%;
    margin:0 auto;
}

div.usr_voice img.usr_fl{
    width: 30%;
    max-width: 240px;
    /*float:none;*/
    /*margin: 0 35%;*/
    margin: 0 2rem 0 0;
}
    

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

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: 2rem;
    box-sizing: border-box;
}

div.usr_button1:hover,div.usr_button2:hover{
    opacity: 1;
}
    
img.usr_fl2{
    width: 60%;
    max-width: 300px;
    margin: 2rem 20% 2rem 20%;
    float: none;
}

p#usr_copy{
	width:100%;
	height:80px;
	margin:0px auto;
	line-height: 80px;
	font-size: 10px;
	letter-spacing:2px;
	color:#FFF;
}
    
div.usr_voicetxt,div.usr_voicetxt2{
    width: 90%;
}
    
div.usr_voicetxt3{
    width: 100%;
    padding: 0;
}

}