@charset "UTF-8";
/*
Theme Name: F-factoryのポートフォリオ
Description: F-factoryのテンプレートです。
Version: 1.0
Author: ringomushi
*/

/*前頁共通スタイル------------------*/

.body {
    width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.main_ly {
    width: 80%;
    margin: 0 auto;
	padding: 1em 0;
}


/*全体のスタイル-------------------*/



.bg_lock {
    background-image: url(./img/tree.png);
    background-attachment: fixed;
    background-size: cover;    
}


.birdarea {
    
    width: 100%;
    background-color: #11ffee00;
}
.bluebird {
    
        width: 1105px;
}
/*position: relative;
position: absolute;
    object-fit: contain;
*/
/*button_pagetop-----------------*/
.space {
  height: 5000px;
}
.pagetop {
  cursor: pointer;
  position: fixed;
  right: 30px;
  bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: .3s;
  color: #F78575;
  background: #fff;
  z-index: 99;
  border: 1px solid  #F78575;
  
/*   デフォルトは非表示 */
  opacity: 0;
}
.pagetop:hover {
    box-shadow: 0 0 10px #F78575;
}

/*テキストスタイル-----------------*/

.h2 {
	font-size: 2em;
	letter-spacing: 0.1em;
}
.h1 {
    width: 10em;
    margin: 0 auto;
    text-align: center;
    font-size: 3em;
}

.h2_anime {
	
	margin: 1em 0;
    font-size: 2em;
    
	
    }
.is-borderanim {
	border-bottom: solid 2px #000;
    animation: border_anim 3s linear forwards;
}
    @keyframes border_anim {
        0%{
            width: 0%;
        }
        100%{
            width: 100%;
        }
    }


.h3 {
	font-family: 'BIZ UDPGothic', sans-serif;
	font-family: 'Kaisei Decol', serif;
	font-family: 'Klee One', cursive;
	font-size: 1.5em;
	text-align: center;
	
}
.h4 {
	font-size: 1em;
}

/*header------------------*/
.header {
	position: fixed;
	top: 0;
	width: 100%;
	padding-top: 1em;
	background-color: white;
	z-index: 98;
}
.header_ly {
    width: 80%;
    height: 4rem;
    margin: 1em auto;    
    inset: 0;
    
}
.nav_flex {
    display: flex;
    justify-content: space-between;
}
.logo {
    
    height: 60px;
}
.gnav {
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex_gnav {
    display: flex;	
}

.li_gnav {
    
	
	width: 7rem;
    text-align: center;
    
}

.gnav_txt {	
	  display: inline-block;
	  
	  font-size:100%;
	  text-decoration:none;
	  position: relative;
	  transition: .3s;
}
.gnav_txt::after{
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  content: '';
	  width: 0;
	  height: 1px;
	  
	  background-color: #F78575;
	  transition: .3s;
}
.gnav_txt:hover::after{
  	  width: 100%;	  
}
.gnav_txt:hover {
	  color: #F78575;
}

/*footer------------------*/
.footer {
	margin-top: 2em;
	padding-top: 0.5em;
	padding-right: 0.5em;
	padding-left: 0.5em;
	background-color: #FFFFFF;
}
.footer_ly {
	background-color: #F8D3D0;
}
.p_footer {
    text-align: center;
}





.sns {
	
	padding: 1em 0;
}
.ul_sns {
    display: flex;
    justify-content: center;
}
.li_sns {
	padding: 0 1em;
	border: none;
}
.sns_img {
	width: 30px;
	height: 30px;
}
.footer_last {	
	padding-top: 1.5em;
	padding-bottom: 1em;
    
	text-align: center;
}
.footer .profile {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	margin: auto;
	padding-top: 2em;
	padding-bottom: 2em;
}
.footer .content table {
	
	margin-right: 2em;
	
}
.footer table td, .footer table th {
    padding: 0.5em 0;	
}
.footer table th {
	width: 6em;
	padding-right: 1em;
}
.footer .myface img {
	width: 250px;
}

.btn,
a.btn,
button.btn {
  
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-border-shadow--radius {
  border-radius: 100vh;
}
a.btn-border-shadow {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;

  background: #fff;
}

a.btn-border-shadow:before {
  position: absolute;
  top: -6px;
  left: -6px;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 1px solid #000;
  border-radius: 0.5rem;
}

a.btn-border-shadow--radius:before {
  border-radius: 100vh;
}

a.btn-border-shadow:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow:hover:before {
  top: 0;
  left: 0;
}
/*index.html--------------*/

/*openview-----------------*/

.start {
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.start svg {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 500px;
}

.wing_curve, .wing_straight {
	stroke-dasharray: 180px;
    animation: wingAnim 1.5s both;
}
@keyframes wingAnim {
	0% {
		stroke-dashoffset: 180px;
	}
	100% {
		stroke-dashoffset: 0px;
	}
}
.txt_ani {
	stroke-dasharray: 10px;
	animation: logoAnim 3s both;
	animation-delay: 1.8s;
	opacity: 0;
}
@keyframes logoAnim {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/*topview-----------------*/
.firstview {
    background-image: url(./img/bluebird_concept_roop.gif);
	background-repeat: no-repeat;
    margin-top: 12em;
	margin-bottom: 5em;
    
}

.span_h1 {
    display: block;
	padding-bottom: 0.5em;
	letter-spacing: 0.1em;
}

/*textanimation*/
.txtanime_1,.txtanime_2,.txtanime_3 {
    
    overflow: hidden;
    white-space: nowrap;
    width: 0;
}
.txtanime_1 {
    animation: s1 10s forwards;
}
@keyframes s1 {
    from { width: 0em; }
    33% { width: 10em; }
    to { width: 10em; }
    
}
.txtanime_2 {
    animation: s2 10s  forwards;
}
@keyframes s2 {
    from { width: 0em; }
    33% { width: 0em; }
    66% { width: 10em; }
    to { width: 10em; }

}
.txtanime_3 {
    animation: s3 10s  forwards;
}
@keyframes s3 {
    from { width: 0em; }
    66% { width: 0em; }
    to { width: 10em; }
}

/*scroll animation---------*/
.scrolldownBox {
	position: relative;
	bottom: -50px;
	left: 0
}
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom: 3%;
  left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
  position: absolute;
  left:10px;
  bottom:10px;
    /*テキストの形状*/
  color: #000000;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#000000;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
  100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
    /*線の形状*/
  width:2px;
  height: 50px;
  background:#000000;
}

/*works-------------------*/
.woks_message {
	width: 80%;
	margin: 0 auto;	
	padding-top: 8em;
    font-family: "Klee One", cursive;
	font-size: 18px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.3em;
	line-height: 1.5em;
	text-align: center;
}
.woks_message span {
	display: block;
}
.woks_message span:nth-child {
	margin-bottom: 5px;
}
/*modalwindow-----------------*/
#glayLayer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.60;
  
  }

#overLayer {
	display: none;
	position: fixed;
	top: 15%;
	left: -8%;
	
	margin-left: 35%;
	z-index:99;
}
#overLayer img {

	max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}
/*モーダルを閉じるボタンの指定*/


.close {
	position: absolute;
	top: 50%;
	right: 25%;
	z-index: 10;
	width: 50px;
	cursor: pointer;
}
/*-------------------------------------*/

.works_container {
    display: flex;
    flex-wrap: wrap;    
	margin: 6em 0;
	
}
.works_logo_container {
    display: flex;
	flex-wrap: wrap;    
	margin: 8em 0;
	
}
.works_unit {
	width: calc(25% - 22px);
	margin: 20px auto;
}
.logo_unit {
	width: calc(20% - 22px);
	margin: 0 auto;
}
.section_margin {
    margin: 10em 0;
}
.works_item_txt {
	padding: 0.5em 0;
    margin-bottom: 1em;
	border-bottom: dotted 1px gray;
    font-size: 13px;
}


.item_img {    
    width: 100%;
    object-fit: cover;
    
}
.item_topangle {
    object-position: 0 0;
}

.atag {
    z-index: 6;
}
.works_logo_container .worls_item img {
	display: block;
	max-width: 100%;
	height: auto;
}
/*Skill-----------------*/
.glid_skill_container {
    display: grid;
    grid-template-columns: repeat(5,1fr);    
    column-gap: 15px;
    row-gap: 80px;
	margin: 6em 2em;
	
}
.skill_unit {
	
}
.skill_unit p {
	text-align: center;
	position: relative;
    
    
}	
.skill_unit p::after {
    content: url("./img/treat_skill.png");
    display: block;
    width: 10px;
    height: 10px;
	position: absolute;
    top: 100%;
    right: 83%;
  
}
.skill_name span {
	color: #F78575;
}
/*concept.html--------------*/
.concept_firstview_ly {
	margin-top: 8em;
	padding: 8em 0;
}
.concept_firstview {
	
    font-family: "Klee One", cursive;
    
}
.concept_message_ly {	
    width: 80%;
	margin: 0 auto; 
	text-align: center;
}
.concept_title {	
	
}
.concept_message {
	width: 90%;
	margin: 0 auto;
	padding-top: 1em;
	letter-spacing: 0.1em;
	line-height: 1.5em;
}
.concept_txt {
	padding: 0 5em;
	letter-spacing: 0.3em;
	line-height: 2em;
}
.parallax_content{
  min-height: 400px;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.front_content{
  padding: 60px 60px 30px 60px;
  background-color: #fff;
}
.parallax_content.img_bg_01{
  background-image: url(./img/background_chiiki.jpg);
}
.parallax_content.img_bg_02{
  background-image: url(./img/background_kosodate.jpg);
}
.parallax_content.img_bg_03{
  background-image: url(./img/background_chisan.jpg);
}


.under_bird {
	width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.tiiki,.tisan {
	letter-spacing: 1em;
}
.kosodate {
	letter-spacing: 0.5em;
}
/*contact.html--------------*/
.form_ly {
	width: 80%;
	margin: 8em auto;
	padding-top: 6em;
}
.form {
	width: 100%;
}
/*スマホのスタイル＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
@media screen and (max-width: 500px) {
	.body {
		width: 100vw;
	}
	.bg_lock {
		position-right: 0;
	}
	.header {
		width: 100vw;
		height: 10em;
		buckground-color: white;
		z-index: 99;
	}
	.gnav {
		margin-top: 1em;
		margin-bottom: 1em;
	}
	.nav_flex {
		display: block;
		text-align: center;
	}
	.h1 {
		/*width: 100vw;*/
		font-size: 2em;
	}
	.scrolldown2 {
		display: none;
	}
	.woks_message {
		text-align: left;
		font-size: 16px;
	}
	.woks_message span {
		margin-top: 8px;
	}
	.glid_skill_container {
    display: block; 	
    }
    .skill_unit p {
        text-align: left;
        position: static;
    }	
	.skill_unit {
		margin: 1em 0;
	}
    .skill_unit p::after {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        position: static;
        top: 100%;
        right: 83%;

    }
	.skill_unit p::after {
		display: none;
	}
	/*scroll animation---------*/
	
	/*Scrollテキストの描写*/
	.scrolldown2 span{
				/*テキストの形状*/
	  color: #b3b3b3;
	  
	}

	/* 丸の描写 */
	.scrolldown2:before {
	  /*丸の形状*/	  
	  background: #b3b3b3;		
	}

	/* 線の描写 */
	.scrolldown2:after{
	  /*線の形状*/
	   background: #b3b3b3;
	}
	.h2 {
		font-size: 1.5em;
	}
	.works_container {
		display: block;
	}
	.works_unit {
		padding-bottom: 1em;
		margin-bottom: 1em;
		
	}
	.main_content_area {
		width: 100%;
    
	}
	.works_container {
		display: block;
		margin-top: 4em;
	}
	.works_unit {
		width: 100%;
	}
	.logo_unit {
		width: calc(50% - 22px);
		margin: 0 auto;
	}
	.form_ly {
		width: 100%;
		margin: 12em 0 0 0;
		height: 1000px;
	}
	.works_logo, .glid_skill_container {
		margin-top: 4em;
	}
	/*モーダルウィンドウ------*/
	#overLayer img {
	position: fixed;
	top: 40%;
	left: 12%;
    width: 85vw;	
}
	
	.close {
	position: absolute;
	top: 190px;
	right: 170px;
	z-index: 10;
	width: 30px;
	cursor: pointer;
}
	/*conceptページ-------*/
	.under_bird_img {
		max-width: 480px; /* 最大幅 */
	}
	.parallax_content.img_bg_01{
		
		background-image: url(./img/background_chiiki_small.jpg);
	}
	.parallax_content.img_bg_02{
		background-image: url(./img/background_kosodate_small.jpg);
	}
	.parallax_content.img_bg_03{
		background-image: url(./img/background_chisan_small.jpg);
	}
	.concept_txt{
		padding: 0;
	}
	
	
	/*footer-----*/
	a.btn-border-shadow {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;
  width: 75%;
  background: #fff;
}
	.footer .profile {
		display: block;
	}
	.footer .content table {
		margin: auto;
	}
	.footer .myface {
		margin-top: 1em;
		text-align: center;
	}
}