@font-face {
	font-family: "Fugaz One";
	font-display: swap;
	src: url(".././fonts/Fugaz_One/FugazOne-Regular.ttf") format("TrueType");
}
@font-face {
	font-family: "M PLUS 1p";
	font-display: swap;
	src: url(".././fonts/M_PLUS_1p/MPLUS1p-Light.ttf") format("TrueType");
	font-weight: 300;
}
@font-face {
	font-family: "M PLUS 1p";
	font-display: swap;
	src: url(".././fonts/M_PLUS_1p/MPLUS1p-Medium.ttf") format("TrueType");
	font-weight: 500;
}
@font-face {
	font-family: "M PLUS 1p";
	font-display: swap;
	src: url(".././fonts/M_PLUS_1p/MPLUS1p-ExtraBold.ttf") format("TrueType");
	font-weight: 800;
}

body{
	margin: 0;
	font-family: 'M PLUS 1p', sans-serif;
	overflow: visible;
	word-break: break-all;
	background-color: #47A8DD;
}
.clear{
	clear: both;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
img{
	vertical-align: bottom;
	max-width: 100%;
}
h1,h2,h3,h4,h5,p,ul,li{
	margin: 0;
	padding: 0;
}
ul{
	list-style-type:none;
}
h1{
	line-height: 1.4em;
	color: #065CA8;
}
p,a{
	color: #4D4D4D;
}
a{
	text-decoration: none;
}
a:hover{
	opacity: 0.5;
}
.wrapper{
	width:950px;
	max-width:95%;
	margin: 0 auto;
}

/*ヘッダー————————————————————————————*/
.header{
	display: flex;
	 justify-content:space-between;
	 flex-wrap: wrap;
	margin-top:20px;
}
.logo .logo_1,.logo .logo_2{
	max-width: 95%;
}
.logo h2.logo_2{
	font-weight: 300;
	font-size: 12px;
	color: #ffffff;
}
/*サブタイトル————————————————————————————*/

.title_service,
.title_work,
.title_news,
.title_contact{
	height: 83px;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	margin: 80px 0px 20px;
}
.title_service::before,
.title_work::before,
.title_news::before,
.title_contact::before{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 15px;
	line-height: 0.5em;
	font-size: 20px;
	color: #ffffff;
}
.title_service{
	background-image: url(".././img/title_service.png");
	width: 415px;
}
.title_service::before{
	content: "できること";
}
.title_work{
	background-image: url(".././img/title_work.png");
	width: 332px;
}
.title_work::before{
	content: "制作実績";
}
.title_news{
	background-image: url(".././img/title_news.png");
	width: 303px;
}
.title_news::before{
	content: "お知らせ";
}
.title_contact{
	background-image: url(".././img/title_contact.png");
	width: 471px;
}
.title_contact::before{
	content: "お問い合わせ";
}


/*FV————————————————————————————*/
.fv{
	position: relative;
	background-repeat: no-repeat;
	background-position: right center;
	width: 100%;
}
.fv_title{
	font-weight: 800;
}
/*キャッチコピー追加———————————————————————————*/
.catchcopy h1,.catchcopy h2{
	color: #ffffff;
	text-align: center;
	line-height: 1.2em;
}
.catchcopy h1{
	margin-top: 80px;
	font-size: min(4.5vw,35px);
	font-weight: 500;
	letter-spacing: 0.1em;
}
.catchcopy h2{
	margin-top: 10px;
	font-size: min(3.5vw,25px);
	font-weight: 300;
	letter-spacing: 0.1em;
}
/*できること————————————————————————————*/

.service{
	width:730px;
	margin: 0 auto;
	max-width: 95%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.service_left_bg{
	width: 100%;
	height: 100%;
	background-image: url(".././img/service.jpg");
	background-size: cover;
	background-position: center center;
}

.service_right_box{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.right_box_in h3{
	font-size: 20px;
	font-weight: 500;
	color: #ffffff;
	padding-bottom: 2px;
	margin-bottom: 2px;
}
.right_box_in p{
	font-size: 14px;
	color: #C6E2F8;
	font-weight: 300;
	line-height: 1.5em;
	letter-spacing: 0.1em;
}
.service_etc{
	border: solid 1px #C6E2F8;
	height: 100%;
	padding: 10px;
	position: relative;
}
.service_etc p{
	font-size: clamp(12px, 1.7vw, 14px);

}


/*制作実績————————————————————————————*/

.work{
	
}
.work_out{
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	margin: 0 auto;
	-webkit-overflow-scrolling: touch;
	gap: 1rem;
	padding-bottom:10px;
}
li.work_item{
	scroll-snap-align: center;
	scroll-snap-stop: always;
	flex: 0 0 250px;
	height: 240px;
}
.work_tag{
	font-size: 14px;
	line-height: 1em;
	margin-top: 5px;
	color: #ffffff;
}
.work_name{
	font-size: 10px;
	line-height: 1.6em;
	color: #ffffff;
}
.work_out::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
.work_out::-webkit-scrollbar-track {
	background: #47A8DD;
}
.work_out::-webkit-scrollbar-thumb {
	background: #C6E2F8;
	border-radius: 20px;
}

/*ニュース————————————————————————————*/

.news_item{
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	align-items: center;
}
.news_item{
	background-color: #ffffff;
	margin: 10px 0;
}
.data{border-right: solid 1px #d3d3d3;
	margin-right: 20px;
	padding: 10px 0px;
}
.news_item .date_day p,.news_item .date_month p{
	font-family: 'Fugaz One', cursive;
	text-align: center;
	line-height: 1em;
}
.news_item .date_day p{
	font-size: 30px;
}
.news_item .date_month p{
	font-size: 14px;
}

.news_content h2{
	font-size: 14px;
	font-weight: 500;
	color: #4D4D4D;
}

/*お問い合わせフォーム————————————————————————————*/
.contact_bg{
	text-align: center;
	margin:80px 0 ;
}
.contact{
	background-color: #ffffff;	
	padding: 10px;
	display:inline-block;
	text-align: center;
}
.contact p{
	padding:10px;
	font-size:14px;
	font-weight: 300;
	color:#ffffff;
	background-color: #47A8DD;
}
.contact h2{
	color:#47A8DD;
	font-size:18px;
	margin-bottom:-8px;
}
.contact h2::after{
	content: "";
	width:22px;
	background-image: url(.././img/contact_link_btn.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;
	margin-left:5px;
	padding: 1px 10px;
}

/*フッター————————————————————————————*/
.footer p{
	font-size: 12px;
	color: #FFFFFF;
	background-color: #0080C8;
	text-align: center;
	font-weight: 300;
	padding: 10px 0px;
}






/*お問い合わせフォーム用CSS————————————————————————————*/
.form_contact{
	width:600px;
	max-width:95%;
	margin: 50px auto 0;
}
.form_contact h2,.form_contact p{
	color: #ffffff;
	text-align: center;
	font-weight: 300;
}
.form_contact h2{
	font-size: 20px
	
}

.form_contact p{
	font-size: 17px
}

.contact_input{
	padding: 5px 10px;
	color: #ffffff;
}
.contact_confirm{
	padding: 10px 20px;
	background-color: #ffffff;
	margin-bottom:30px;
}
.contact_confirm p{
	color:#333333;
	line-height:2em;
}
input[type="submit"]{
-webkit-appearance: none;
}
.submit_btn{
	width: 150px;
	height: 45px;
	background-color: #a38a77;
	border: 0;
	display: block;
	margin: 20px auto 80px;
	font-size: 20px;
	color: #ffffff;
}




/*アニメーションCSS————————————————————————————*/


/* 上から */
.js_move{
	opacity: 0;
}
.fade_in_up{
	 will-change: transform;/* transfromに変更が加わることを示す */
	animation-name: fadeDownAnime;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0 ;
}

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

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


.news_item_anime{
	padding:10px;
	animation-name: news_item_animes;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;

}
@keyframes news_item_animes{
  from {
	transform: scale(1);
  }

  to {
	transform: scale(.98);
  }
}


.news_item_animes{
	padding:10px;
	animation-name: news_item_animess;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;

}
@keyframes news_item_animess{
  from {
	transform: scale(.98);
  }

  to {
	transform: scale(1);
  }
}