@charset "UTF-8";


/*ーーーーーーーーーーーーーーーーーーーーーーーー
 カスタムプロパティ
ーーーーーーーーーーーーーーーーーーーーーーーー */

:root {
  --color-main: #af9544;
}




/*ーーーーーーーーーーーーーーーーーーーーーーーー
フォント
ーーーーーーーーーーーーーーーーーーーーーーーー*/

/* 全体フォント調整
ーーーーーーーーーーーーーーーーーーーーーーーー */
p,ul,ol,dl,dt,dd,li,
table,th,td {
font-size:16px;
}
p,ul,li {
margin: 0px;
padding: 0px;
list-style: none;
}




/*行間設定
ーーーーーーーーーーーーーーーーーーーーーーーー*/

h1,h2,h3,h4,h5,h6 {
line-height:1.3;
}
p,th,td,caption,
ul,ol,li,
dl,dt,dd {
line-height:1.8;
}





/* ーーーーーーーーーーーーーーーーーーーーーーーー
レイアウト
ーーーーーーーーーーーーーーーーーーーーーーーー */

/* スマホ時もPCレイアウトで見せる
ーーーーーーーーーーーーーーーーーーーーーーーー */

body {
min-width: 1270px;
}





/* キービジュアル
ーーーーーーーーーーーーーーーーーーーーーーーー*/

.lay100 {
max-width: 1500px;
margin: 0 auto;
display: grid;
place-items: center;
justify-content: center;
}
.lay100 > * {
  grid-area: 1 / 1;
}
.lay100 h1 {
font-size: 50px;
font-weight: 600;
font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "MS PMincho", "Noto Serif JP", "Serif", serif;
z-index: 2;
justify-self: start;
}
.lay100 h1 span {
display: inline-block;
background:#fff;
margin: 4px 0px;
padding: 0px 20px;
}
.lay100 p {
  grid-area: 1 / 1;
  z-index: 1;
}






/* こんなお悩みはありませんか？
ーーーーーーーーーーーーーーーーーーーーーーーー */

/* 枠 */
.lay101 .boxa {
width: 1200px;
height: 220px;
margin: 0 auto;
margin-top: 20px;
position: relative;
}
.lay101 .boxa .wrpa {
border: solid 1px var(--color-main);
border-radius: 25px;
padding: 25px 25px 15px;
position: absolute;
display: inline-block;
}

/* 枠　配置 */
.lay101 .boxa .wrpa:first-child {
left: 180px;
}
.lay101 .boxa .wrpa:nth-child(2) {
right: 240px;
}
.lay101 .boxa .wrpa:nth-child(3) {
top: 130px;
left: 0px;
}
.lay101 .boxa .wrpa:nth-child(4) {
top: 130px;
right: 80px;
}

/* 吹き出し */
.lay101 .boxa .wrpa::after {
width: 43px;
height: 55px;
content: "";
display: inline-block;
background: url(https://s3-ap-northeast-1.amazonaws.com/s3.peraichi.com/userData/4549fcce-325d-4c9c-b26b-fc5ddbefcb97/img/67e97f40-8c9f-013e-d470-0a58a9feac02/balloon_bottom.png) no-repeat center center;
position: absolute;
bottom: -65px;
}
.lay101 .boxa .wrpa:first-child::after {
right: 140px;
}
.lay101 .boxa .wrpa:nth-child(2)::after {
left: 60px;
transform: scaleX(-1);
}
.lay101 .boxa .wrpa:nth-child(3)::after {
right: 80px;
}
.lay101 .boxa .wrpa:last-child::after {
left: 60px;
transform: scaleX(-1);
}

/* テキスト */
.lay101 .boxa .wrpa p {
font-size: 16px;
}
.lay101 .boxa .wrpa p:first-child {
font-size: 18px;
font-weight: 600;
color: var(--color-main);
margin-bottom: 10px;
line-height: 1.6;
}

/* 画像 */
.lay101 .boxb {
text-align: center;
position: relative;
top: 0px;
}





/* 成果を生み出すツール
ーーーーーーーーーーーーーーーーーーーーーーーー */
.lay102 {
background: #f5f5f5 url(https://s3-ap-northeast-1.amazonaws.com/s3.peraichi.com/userData/4549fcce-325d-4c9c-b26b-fc5ddbefcb97/img/70b9d9a0-8c9f-013e-d480-0a58a9feac02/uri_bg.png) no-repeat center top;
height: 1065px;
}

.lay102 .seca {
width: 1270px;
margin: 0 auto;
}
.lay102 h2 {
text-align: center;
font-size: 40px;
font-weight: 600;
padding: 72px 0px 22px;
}
.lay102 h2 span {
color: var(--color-main);
}
.lay102 h2 span.txta {
font-size: 56px;
padding: 0px 3px;
}

.lay102 .boxa,
.lay102 .boxb,
.lay102 .boxc {
display:flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
padding-left: 330px;
margin-top: 50px;
/* background: rgba(0, 0, 0, 0.2); */
}
.lay102 .boxa {
width: 985px;
height: 310px;
}
.lay102 .boxb {
width: 1095px;
height: 285px;
margin-top: 80px;
margin-left: 175px;
}
.lay102 .boxc {
width: 1200px;
height: 310px;
margin-top: 80px;
}



.lay102 h3 {
display: inline-block;
font-size: 34px;
font-weight: 600;
margin-bottom: 20px;
}
.lay102 h3 span {
background-image: linear-gradient(#AF95444D, #AF95444D);
background-repeat: no-repeat;
background-size: 100% 0.4em;
background-position: 0 90%;
padding-bottom: 0.1em;
}






/* 企業の本来の価値・想いが伝わる
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay106 h2 {
font-size: 40px;
font-weight: 600;
text-align: center;
}
.lay106 h2 span {
color: var(--color-main);
}
.lay106 .boxa {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 1270px;
margin: 40px auto 0px;
}
.lay106 .boxa .wrpa {
width: 33%;
border-left: solid 1px #b3b3b3;
box-sizing: border-box;
padding: 0 20px;
text-align: center;
}
.lay106 .boxa .wrpa:last-child {
border-right: solid 1px #b3b3b3;
}
.lay106 .boxa .wrpa h3 {
font-size: 25px;
font-weight: 600;
margin: 20px 0px 10px;
}







/* コピーライターがつくるからコンテから違いがわかる
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay108 {
width: 912px;
margin: 50px auto 0px;
text-align: center;
}
.lay108 p:last-child {
margin-top: 10px;
font-size: 28px;
font-weight: bold;
}



/* 制作実績
ーーーーーーーーーーーーーーーーーーーーーーーー */


.lay109 .seca {
width: 1000px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
padding-top: 10px;
}
.lay109.bg_white .seca {
padding-top: 50px;
}
.lay109 .boxa {
width: 160px;
}
.lay109 .boxb {
width: 800px;
}

.lay109 h2 {
font-size: 34px;
color: var(--color-main);
font-weight: 600;
}
.lay109 p:nth-child(2) {
margin-top: 20px;
}
.lay109 p:last-child {
margin-top: 10px;
font-size: 14px;
font-weight: 600;
margin-left: 22px;
text-indent: -22px;
}

.lay109 p:last-child::before {
content: "Ex.";
}



/* 映像制作の流れ
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay110 {
background: url(https://s3-ap-northeast-1.amazonaws.com/s3.peraichi.com/userData/4549fcce-325d-4c9c-b26b-fc5ddbefcb97/img/67ee5fa0-8c9f-013e-d474-0a58a9feac02/flow_bg.png) no-repeat left top;
max-width: 1600px;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}

.lay110 .boxa {
position: relative;
padding-right: calc(50px + 25px);
margin-right: 25px;
display: inline-block;
}

.lay110 .boxa::after {
content: "";
display: inline-block;
background: url(https://s3-ap-northeast-1.amazonaws.com/s3.peraichi.com/userData/4549fcce-325d-4c9c-b26b-fc5ddbefcb97/img/67ed29e0-8c9f-013e-d473-0a58a9feac02/flow_arrow@2x.png) no-repeat center center / cover;
width: 50px;
height: 190px;
position: absolute;
top: 0px;
right: 0px;
}
.lay110 .boxa:last-child {
padding-right: 0px;
margin-right: 0px;
}
.lay110 .boxa:last-child::after {
content: none;

}

.lay110 h3,
.lay110 p {
color: #fff;
}
.lay110 h3 {
font-size: 28px;
}
.lay110 p {
margin-top: 20px;
font-size: 14px;
line-height: 1.6;
}





/* ーーーーーーーーーーーーーーーーーーーーーーーー
モジュール
ーーーーーーーーーーーーーーーーーーーーーーーー */

/* 背景色
ーーーーーーーーーーーーーーーーーーーーーーーー */

.bg_white {
background: #fff;
}




/*表示切り替え
ーーーーーーーーーーーーーーーーーーーーーーーー*/

.display_pc {display:block;}
.display_smp {display:none;}
img.display_pc {display:inline-block;}
img.display_smp {display:none;}

		@media screen and (max-width:743px) {
		.display_pc {display:none;}
		.display_smp {display:block;}
		img.display_pc {display:none;}
		img.display_smp {display:inline-block;}
		/*smp end*/}





/*スペース調整
ーーーーーーーーーーーーーーーーーーーーーーーー*/

.mt0 {margin-top: 0px !important;}
.mt5 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}
.mt55 {margin-top: 55px !important;}
.mt60 {margin-top: 60px !important;}
.mt65 {margin-top: 65px !important;}
.mt70 {margin-top: 70px !important;}
.mt75 {margin-top: 75px !important;}
.mt80 {margin-top: 80px !important;}
.mt85 {margin-top: 85px !important;}
.mt90 {margin-top: 90px !important;}
.mt95 {margin-top: 95px !important;}
.mt100 {margin-top: 100px !important;}
.mt110 {margin-top: 110px !important;}
.mt120 {margin-top: 120px !important;}
.mt130 {margin-top: 130px !important;}
.mt140 {margin-top: 140px !important;}
.mt150 {margin-top: 150px !important;}
.mt160 {margin-top: 160px !important;}
.mt170 {margin-top: 170px !important;}
.mt180 {margin-top: 180px !important;}
.mt190 {margin-top: 190px !important;}
.mt200 {margin-top: 200px !important;}

.mr0 {margin-right: 0px !important;}
.mr5 {margin-right: 5px !important;}
.mr10 {margin-right: 10px !important;}
.mr15 {margin-right: 15px !important;}
.mr20 {margin-right: 20px !important;}
.mr25 {margin-right: 25px !important;}
.mr30 {margin-right: 30px !important;}
.mr35 {margin-right: 35px !important;}
.mr40 {margin-right: 40px !important;}
.mr45 {margin-right: 45px !important;}
.mr50 {margin-right: 50px !important;}
.mr55 {margin-right: 55px !important;}
.mr60 {margin-right: 60px !important;}
.mr60 {margin-right: 65px !important;}
.mr70 {margin-right: 70px !important;}
.mr75 {margin-right: 75px !important;}
.mr80 {margin-right: 80px !important;}
.mr85 {margin-right: 85px !important;}
.mr90 {margin-right: 90px !important;}
.mr95 {margin-right: 95px !important;}
.mr100 {margin-right: 100px !important;}

.mb0 {margin-bottom: 0px !important;}
.mb5 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb35 {margin-bottom: 35px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb45 {margin-bottom: 45px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb55 {margin-bottom: 55px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb60 {margin-bottom: 65px !important;}
.mb70 {margin-bottom: 70px !important;}
.mb75 {margin-bottom: 75px !important;}
.mb80 {margin-bottom: 80px !important;}
.mb85 {margin-bottom: 85px !important;}
.mb90 {margin-bottom: 90px !important;}
.mb95 {margin-bottom: 95px !important;}
.mb100 {margin-bottom: 100px !important;}
.mb110 {margin-bottom: 110px !important;}
.mb120 {margin-bottom: 120px !important;}
.mb130 {margin-bottom: 130px !important;}
.mb140 {margin-bottom: 140px !important;}
.mb150 {margin-bottom: 150px !important;}
.mb160 {margin-bottom: 160px !important;}
.mb170 {margin-bottom: 170px !important;}
.mb180 {margin-bottom: 180px !important;}
.mb190 {margin-bottom: 190px !important;}
.mb200 {margin-bottom: 200px !important;}

.ml0 {margin-left: 0px !important;}
.ml5 {margin-left: 5px !important;}
.ml10 {margin-left: 10px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml25 {margin-left: 25px !important;}
.ml30 {margin-left: 30px !important;}
.ml35 {margin-left: 35px !important;}
.ml40 {margin-left: 40px !important;}
.ml45 {margin-left: 45px !important;}
.ml50 {margin-left: 50px !important;}
.ml55 {margin-left: 55px !important;}
.ml60 {margin-left: 60px !important;}
.ml60 {margin-left: 65px !important;}
.ml70 {margin-left: 70px !important;}
.ml75 {margin-left: 75px !important;}
.ml80 {margin-left: 80px !important;}
.ml85 {margin-left: 85px !important;}
.ml90 {margin-left: 90px !important;}
.ml95 {margin-left: 95px !important;}
.ml100 {margin-left: 100px !important;}