@charset "utf-8";
html {
    scroll-padding-top: 120px;
}
body {
    font-size: 18px;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    color: #777;
    text-transform: uppercase;
    text-align: center;
}
.HiraginoGothic {
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 300;
    font-style: normal;
}
.HiraginoGothic_Bold {font-weight: 600;}

.Relation {
    font-family: "relation-one", serif;
    font-weight: 400;
    font-style: normal;
    text-transform: none;   
}
.Relation_Bold {font-weight: 700;}

.pc-only { display: block; }
.sp-only { display: none; }

/* -------------------------------------
　ローディング画面
------------------------------------- */
.loading {
    position: fixed;
    inset: 0;
    z-index: 999;
    background-color: #fff;
    display: grid;
    place-items: center;
    animation: fadeOut 1.5s 2.5s forwards;
}
@keyframes fadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      visibility: hidden;
    }
}
.loading_logo {
    opacity: 0;
    animation: logo_fade 2s 0.5s forwards;
    width: 240px;
}
@keyframes logo_fade {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    60% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
    }
}
/* ------------------------------------------
　全ページ共通／ヘッダー_グローバルナビゲーション
------------------------------------------ */
.site-header{
    background: rgba(255,255,255,0.8);
    position: fixed;
    top: 0;
    transition: .5s;
    width: 100%;
    height: auto;
    z-index: 100;
    box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.5);
    padding: 0 30px;
}
.site-header.hide{
    transform: translateY(-100%);
}
.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    cursor: default;
}
.mini {
    font-size: 13px;
    font-weight: normal;
}

header>nav>ul>li>a {
    display: block;
    width: auto;
    font-size: 22px;
    font-weight: 600;
    padding: 20px 20px;
}
.Relation {
    font-size: 50px;
}

/* ドロップダウンメニューのスタイル---- */
/*下の階層のulの基点にするためliにrelativeを指定*/
header nav ul li{
	position: relative;
}
/* 通常時は非表示 */
.child_menu {
    display: none;
    position: absolute;
    z-index: 4;
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255);
    width: 100%;
    box-shadow: 0px 0px 7px 1px;
}
.dropdown {
    position: relative;
}
  
/* dropdownクラスhoverしたら隣接要素のdropdown_menuクラスを表示 */
.dropdown:hover+.dropdown_menu,
.dropdown_menu:hover {
    display: block;
}

/* 吹き出しの△の部分 */
.child_menu::after {
    content: '';
    position: absolute;
    top: -8px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(255, 255, 255);
}

.child_menu li a {
    display: block;
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid #777;
    color: #777;
    font-size: 15.5px;
    font-weight: bold;
    transition: all .5s;
}
.child_menu li a:hover {
    background-color: #beeefc;

}

header nav ul li.current a,
header nav ul li a:hover{
	color:#0481A2;
}

/* ------------------------------------------
　全ページ共通／h2タイトル＆ボーダー
------------------------------------------ */
section {
    display: inline-block;
    width: 85vw;
    margin-top: 77px;
    margin-bottom: 50px;
}
h2 {
    font-size: 30px;
    letter-spacing: 0.05em;
}

.border{
	position: relative;
	text-align: center;
	font-size: 15px;
    padding-bottom: 5px;
}
.border:before{
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	border-bottom: solid 1px #777;
	transform: translateX(-50%);
	animation: border_anim 2s linear forwards;
}
@keyframes border_anim {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}

/* ------------------------------------------
　メインエリア
------------------------------------------ */
/* スライダー */
.slider div {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100vh;
    margin: 0;
}
.slider div.img01 {background-image: url(../images/slider_banner01.webp);}
.slider div.img02 {background-image: url(../images/slider_banner02.webp);}
.slider div.img03 {background-image: url(../images/slider_banner03.webp);}
.slider div.img04 {background-image: url(../images/slider_banner04.webp);}
.slider div.img05 {background-image: url(../images/slider_banner05.webp);}
.slider div.img06 {background-image: url(../images/slider_banner06.webp);}

.slider .slick-dots {
    bottom: 4%;
    z-index: +1;
}

/* コンセプト */
#concept span {
    display: inline-block;
    margin-top: 20px;
}
.pink {
    color: #fa8296;
    padding: 0 5px 0;
}
.Hina_Mincho {
    font-family: "hina-mincho", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 1.7;
    margin-top: 20px;
}
.mini2 {
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-size: 20px;
    font-weight: normal;
    line-height: 1.7;
    margin-bottom: 35px;
    margin-top: 5px;
}

/* ドットアニメーション */
.dot {
    width: 5px;
    height: 5px;
    background-color: #666;
    border-radius: 50%;
    margin-bottom: 12px;
    opacity: 0;
}
.dot:nth-child(1) { animation: fadeIn 3s infinite; animation-delay: 0s; }
.dot:nth-child(2) { animation: fadeIn 3s infinite; animation-delay: 0.2s; }
.dot:nth-child(3) { animation: fadeIn 3s infinite; animation-delay: 0.4s; }
.dot:nth-child(4) { animation: fadeIn 3s infinite; animation-delay: 0.6s; }
.dot:nth-child(5) { animation: fadeIn 3s infinite; animation-delay: 0.8s; }

@keyframes fadeIn {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0 20px;
}

/* ------------------------------------------
　WORKSページ共通／サムネイル
------------------------------------------ */
.w_design section,
.w_illust section,
.w_movie section,
.contact section,
.commision section,
.price section,
.privacy section {
    margin: 150px 0 60px;
    line-height: 1.5;
}

/* デザイン・イラスト作品ページ */
#design,
#illust,
#movie,
#osirase,
#csr {
    margin-top: 0;
}
#design ul,
#illust ul,
#movie ul,
#osirase ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
}
#design ul li,
#illust ul li,
#osirase ul li {
    flex: 1 0 33%;  /* 3つずつ表示させるために33%に設定 */
    box-sizing: border-box;
    padding: 10px;  /* 必要に応じてスペースを調整 */
}
#movie ul li {
    width: 48%;
}
#movie ul li div iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
}

#design img,
#illust img,
#movie img,
#osirase img {
    width: 100%;
    object-fit: cover;
}
#design h3,
#illust h3,
#movie h3 {
    display: inline-block;
    font-size: 18px;
    margin: 5px auto 0;
    text-transform: none;
}
#design p,
#illust p,
#movie p {
    font-size: 13px;
    margin-bottom: 20px;
    text-transform: none;
}


/* ----------WORK_個別ページのスタイル---------- */

#works_kobetu,
.w_detail {
    margin-top: 0;
    max-width: 1000px;
}
.w_design p{text-transform: none;}

/*画像の横幅を100%にしてレスポンシブ化*/
#works_kobetu img{
    width: 100%;
    object-fit: cover;
    margin-bottom: 10px;
}
#works_kobetu h3 {
    text-align: left;
    font-size: 20px;
    font-weight: bold;
}
#works_kobetu p {
    text-align: left;
    margin-bottom: 30px;
    text-transform: none;
}
section.w_detail,
section.w_detail_2 {
    max-width: 1000px;
    border: 1px solid #777;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin: 0 auto;
    text-transform: none;
}
.w_detail img,
.w_detail_2 img {
    width: 28%;
    object-fit: cover;
    aspect-ratio: 6 / 4;
}
.w_detail p,
.w_detail_2 p {
    font-size: 16px;
}
.w_detail div {
    padding: 10px;
    width: 43%;
    text-align: left;
}
.w_detail_2 div {
    padding: 10px;
    width: 71%;
    text-align: left;
}
.shop {
    font-size: 20px;
    font-weight: bold;
    margin: 20px 0 12px;
    text-transform: none;
}
.bold {
    font-weight: bold;
    margin-right: 10px;
}
.w_detail .shop,
.w_detail_2 .shop {
    font-size: 18px;
    margin-top: 0;
}
.bigfont {
    font-size: 24px;
    text-decoration: underline;
}
#osirase {
    max-width: 1000px;
    border: 1px solid #aaa;
    padding: 10px;
}
#osirase img {
    aspect-ratio: 1 / 1;
}
#osirase p {
    font-size: 16px;
    margin-top: 10px;
    line-height: 1.2;
}
#osirase h3 {
    font-weight: bold;
    margin: 40px 0;
}
#osirase p.thanks {
    font-size: 18px;
    line-height: 1.5;
    margin: 50px 0;
}

/* ----------WORK_前にもどるボタンのスタイル---------- */
.backbutton {
    padding: 77px 0 40px;
}
.backbutton a {
    background: #eee;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 35px;
    color: #777;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.backbutton a:before {
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    left: -2em;
    transform: translateY(calc(-50% - 2px)) rotate(-35deg);
    width: 10px;
    height: 2px;
    background-color: #0481A2;
    transition: 0.3s;
}
.backbutton a:after {
    content: '';
    position: absolute;
    top: 50%;
    left: -2em;
    transform: translateY(-50%);
    width: 60px;
    height: 2px;
    background-color: #0481A2;
    transition: 0.3s;
}
.backbutton a:hover:before, .backbutton a:hover:after {
    left: -2.5em;
}
.backbutton a:hover {
    background: #edf6ff;
    color: #0481A2;
}

/* ------------------------------------------
　プロフィールページ
------------------------------------------ */
.about_bg img {
    object-fit: cover;
    width: 100%;
    height: 100vh;
    margin: 0;
}
.about_bg {
    position: relative;
}
.about_bg h2 {
    position: absolute;
    top:73%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    filter: drop-shadow(0px 0px 10px  rgba(0,0,0,0.4));
    font-size: 14vw;
    white-space: nowrap;
    display: inline-block;
    width: 100%;
    letter-spacing:normal;

}
.about_bg p {
    position: absolute;
    top:90%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    filter: drop-shadow(0px 0px 10px  rgba(0,0,0,0.4));
    font-size: 32px;
    font-weight: bold;
}
.aboutus p {
    line-height: 1.5;
    margin-bottom: 15px;
}
.aboutus p .pink {
    font-size: 18px;
    font-weight: bold;
    text-transform: none;
}
.nfds_staff {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 10px auto 30px;
    text-align: left;
    border: 1px solid #aaa;
}
.nfds_staff img {
    width: 40%;
}
.nfds_staff div {
    width: 58%;
}
.nfds_staff hgroup h3 {
    font-size: 25px;
    font-weight: bold;
}
.nfds_staff hgroup  {
    margin-bottom: 40px;
}
.nfds_staff p {
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 15px;
}

/* トップニュース＆社会貢献エリア 共通 */
#news {
    margin-top: 30px;
}
#news ul,
#csr ul {
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
}
#news ul li,
#csr ul li {
    width: 31%;
}
#news img,
#csr img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 6 / 4;
}
#news h3,
#csr h3 {
    display: inline-block;
    font-size: 18px;
    margin: 5px auto 0;
    text-transform: none;
}
#news p,
#csr p {
    font-size: 17px;
    margin: 8px 0;
    text-transform: none;
}

/* 会社概要＆キャンペーンエリアのテーブル */
.cp table,
#nfds_gaiyou table{
    table-layout: fixed;
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
    text-align: left;
    text-transform: none;
    font-size: 18px;
}
.cp table p,
#nfds_gaiyou table p {
    margin: 15px 0;
    line-height: 1.5;
}
.cp table th,td,
#nfds_gaiyou table th,td {
    padding: 20px;
    border: 1px solid #777;
}
.cp table th,
#nfds_gaiyou table th {
    width: 20%;
    vertical-align: middle;
    background-color: #eee;
}
#nfds_gaiyou a {
    text-decoration: underline;
}

/* ------------------------------------------
　お問い合わせページ
------------------------------------------ */
.contact section {
    margin-bottom: 30px;
}
.nfds_line {
    padding: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
    text-align: left;
    margin: 0 auto;
    border-top: dashed 1px #999;
    border-bottom: dashed 1px #999;
    margin-bottom: 30px;
    text-transform: none;
}
.nfds_line img {
    width: 77px;
}
.nfds_line p {
    padding: 30px;
    font-size: 16px;
    line-height: 1.5;
}

/* プライバシーポリシー */
.privacy section {
    max-width: 900px;
    text-align: left;
    font-size: 17px;
    padding: 10px;
    text-transform: none;
}
.privacy section h2 { 
    text-align: center; 
}
.privacy section h3 { 
    margin: 50px 0 40px 0;
    padding: 15px 0 15px 20px;
    font-size: 24px;
    border-left: 5px solid #777;
}
.privacy section ol li { 
    margin: 10px 0 10px 50px;
    list-style-type: decimal;
}
.privacy .date {
    text-align: right;
}

/* ------------------------------------------
　キャンペーンページ
------------------------------------------ */
.cp {
    max-width: 1000px;
    margin-top: 150px;
}
.cp a {
    font-weight: bold;
    text-decoration:underline;
}
.cp img {
    width: 100%;
    margin-bottom: 50px;
}
.cp h2 {
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 77px;
}
.cp p {
    font-size: 15px;
    line-height: 1.2;
    text-align: left;
}
.cp_name img {
    width: 100%;
    margin-bottom: 25px;
}
.cp_name h3 {
    font-size: 26px;
    font-weight: bold;
    text-transform: none;
    margin-bottom: 25px;
}
.cp_name p {
    font-size: 20px;
    text-align: center;
    text-transform: none;
    font-feature-settings: "palt";
    letter-spacing:1px;
    line-height: 1.3;
    margin-bottom: 15px;
}
.cp_name {
    margin-bottom: 77px;
}

/* ------------------------------------------
　オーダーフローページ
------------------------------------------ */
.orderflow {
    max-width: 1000px;
}
.com_grid {
    display: grid;
    grid-template-rows: auto 4vw auto 4vw auto 4vw auto auto;
    grid-template-columns: 32% 65%;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    color: #444;
    line-height: 1.4;
}
.step01 {
    grid-row: 1/2;
    grid-column: 1/2;
    padding-right: 20px;
}
.step01-p {
    grid-row: 1/2;
    grid-column: 2/4;
    text-align: left;
}
.step01-b {
    grid-row: 2/3;
    grid-column: 1/4;
}
.step02 {
    grid-row: 3/4;
    grid-column: 1/2;
    padding-right: 20px;
}
.step02-p {
    grid-row: 3/4;
    grid-column: 2/4;
    text-align: left;
}
.step02-b {
    grid-row: 4/5;
    grid-column: 1/4;
}
.step03 {
    grid-row: 5/6;
    grid-column: 1/2;
    padding-right: 20px;
}
.step03-p {
    grid-row: 5/6;
    grid-column: 2/4;
    text-align: left;
}
.step03-b {
    grid-row: 6/7;
    grid-column: 1/4;
}
.step04 {
    grid-row: 7/8;
    grid-column: 1/2;
    padding-right: 20px;
}
.step04-p {
    grid-row: 7/8;
    grid-column: 2/4;
    text-align: left;
}
.onegai-p {
    grid-row: 8/9;
    grid-column: 1/4;
    background-color: rgb(248, 217, 239);
    padding: 20px;
    margin-top: 40px;
    border-radius: 22px;
}
.onegai-p p { 
    font-size: 17px;
    text-align: left;
    margin: 10px;
}
.com_grid li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.step01-p h3,
.step02-p h3,
.step03-p h3,
.step04-p h3 {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 10px;
}
.step01-p p,
.step02-p p,
.step03-p p,
.step04-p p {
    font-size: 17px;
    margin-bottom: 12px;
    text-transform: none;
}
.red { color: rgb(202, 3, 3); font-weight: bold; }

.commision section:nth-child(2) { margin: 0;}

/* ------------------------------------------
　デザイン制作費ページ
------------------------------------------ */

.price section:nth-child(2) { margin: 0;}

h4 {
    font-weight: bold;
    font-size: 19px;
    line-height: 1.4;
    margin-top: 30px;
}

.price_grid {
    display: grid;
    grid-template-rows: auto 4vw auto 4vw auto 4vw auto 4vw auto auto;
    grid-template-columns: 32% 65%;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    color: #444;
    line-height: 1.4;
}
.price01 {
    grid-row: 1/2;
    grid-column: 1/2;
    padding-right: 20px;
}
.price01-p {
    grid-row: 1/2;
    grid-column: 2/4;
    text-align: left;
}
.price01-b {
    grid-row: 2/3;
    grid-column: 1/4;
}
.price02 {
    grid-row: 3/4;
    grid-column: 1/2;
    padding-right: 20px;
}
.price02-p {
    grid-row: 3/4;
    grid-column: 2/4;
    text-align: left;
}
.price02-b {
    grid-row: 4/5;
    grid-column: 1/4;
}
.price03 {
    grid-row: 5/6;
    grid-column: 1/2;
    padding-right: 20px;
}
.price03-p {
    grid-row: 5/6;
    grid-column: 2/4;
    text-align: left;
}
.price03-b {
    grid-row: 6/7;
    grid-column: 1/4;
}
.price04 {
    grid-row: 7/8;
    grid-column: 1/2;
    padding-right: 20px;
}
.price04-p {
    grid-row: 7/8;
    grid-column: 2/4;
    text-align: left;
}
.price04-b {
    grid-row: 8/9;
    grid-column: 1/4;
}
.price05 {
    grid-row: 9/10;
    grid-column: 1/2;
    padding-right: 20px;
}
.price05-p {
    grid-row: 9/10;
    grid-column: 2/4;
    text-align: left;
}

.price_grid li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.price01-p h3,
.price02-p h3,
.price03-p h3,
.price04-p h3, 
.price05-p h3 {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 10px;
}
.price01-p p,
.price02-p p,
.price03-p p,
.price04-p p,
.price05-p p {
    font-size: 17px;
    margin-bottom: 12px;
    text-transform: none;
    font-feature-settings: "palt";
    letter-spacing:1px;
}

/* ------------------------------------------
　全ページ共通／フッターエリア
------------------------------------------ */
footer {
    background: #777;
    color: #fff;
    display: block;
    text-align: center;
    position: relative;
    z-index: 2;
    text-transform: none;
    font-size: 13px;
    padding: 10px 0 20px;
    margin-top: 60px;
}
footer p {
    padding: 3px;
}
footer p.Relation {
    font-size: 25px;
}

/* -------------------------------------
　全ページ共通／TOPに戻るボタン
------------------------------------- */
/*リンクを右下に固定*/
#page-top {
    position: fixed;
    right: 10px;
    bottom:30px;
    z-index: 2;
    opacity: 0; /*はじめは非表示*/
    transform: translateY(150px);
}
/*　上に上がる動き　*/
#page-top.UpMove{
    animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
    from {
    opacity: 0;
    transform: translateY(150px);
    }
   to {
    opacity: 1;
    transform: translateY(0);
    }
}
/*　下に下がる動き　*/
#page-top.DownMove{
    animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
    from {
    opacity: 1;
    transform: translateY(0);
    }
    to {
    opacity: 1;
    transform: translateY(150px);
    }
}
/*画像の切り替えと動き*/
#page-top a {
    display: block;
    width: 100px;
    height: 100px;
    background: url("../images/pagetop_1.gif") no-repeat center;
    background-size: contain;
}
#page-top.floatAnime a{
    width: 100px;
    height: 100px;
    background: url("../images/pagetop_2.gif") no-repeat center;
    background-size: contain;
    animation: floatAnime 2s linear infinite;
    opacity: 0;
}
@keyframes floatAnime {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(0);opacity: 1; }
}
/*Page Topと書かれたテキストの位置*/
#page-top span{
    position: absolute;
    bottom: -10px;
    right: 20px;
	color: #000;
}


/* --------------------------------------
　ここからスマホ版のスタイル
--------------------------------------- */
@media screen and (max-width:640px) {

body { font-size: 14px; }
.pc-only { display: none; }
.sp-only { display: block; }


/* ---------スマホ版トップページ--------- */

/* ヘッダーメニュー */
.site-header{
    padding: 0 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.flex {
    display: flex;
    justify-content: center; /* 横方向に中央揃え */

}
header>nav>ul>li { float: left;}
header>nav>ul>li>a { font-size: 16px; padding: 10px 10px; width:105px;}
.child_menu li a { font-size: 14px;}
.Relation { font-size: 40px; text-align: center; margin-bottom: -7px; padding-top: 7px;}

/* スライダー */
.slider div { height: 77vh;}
.slider div.img01 {background-image: url(../images/slider_sp_banner01.webp);}
.slider div.img02 {background-image: url(../images/slider_sp_banner02.webp);}
.slider div.img03 {background-image: url(../images/slider_sp_banner03.webp);}
.slider div.img04 {background-image: url(../images/slider_sp_banner04.webp);}
.slider div.img05 {background-image: url(../images/slider_sp_banner05.webp);}
.slider div.img06 {background-image: url(../images/slider_sp_banner06.webp);}

.Hina_Mincho {
    font-size: 24px;
    line-height: 1.3;
    margin-top: 20px;
}
.mini2 {
    font-size: 15.5px;
    line-height: 1.4;
    margin-top: 5px;
}


/* ----------キャンペーンページ---------- */
.cp { margin-top: 100px;}
.cp img { margin-bottom: 40px; }
.cp p { font-size: 13.5px; }
.cp h2 { font-size: 16px; }

.cp_name img {margin-bottom: 25px;}
.cp_name h3 {
    font-size: 24px;
    margin-bottom: 25px;
}
.cp_name p {
    font-size: 16px;
    text-align: center;
    text-transform: none;
    font-feature-settings: "palt";
    letter-spacing:1px;
    line-height: 1.3;
    margin-bottom: 15px;
}


/* -------------WORKページ------------- */
#design ul li,
#illust ul li,
#osirase ul li {
    flex: 1 0 49%;  /* 2つずつ表示させるために49%に設定 */
}
#movie ul li { width: 100%;}

#design h3,
#illust h3,
#movie h3 {
    font-size: 90%;
    font-weight: bold;
}
#design p,
#illust p,
#movie p { font-size: 12px; }

/* -----------WORK個別ページ------------ */

#works_kobetu { width: 100%; margin-bottom: 20px; }
#works_kobetu h3 { padding: 0 22px; font-size: 17px; }
#works_kobetu p { padding: 0 29px; margin-bottom: 30px; }

section.w_detail,
section.w_detail_2 {
    display: block;
    word-wrap: break-word;
}
.w_detail img,
.w_detail_2 img {
    width: 100%;
    margin-bottom: 10px;
}
.w_detail div {
    padding: 0;
    width: 100%;
}
.w_detail_2 div {
    padding: 0;
    width: 100%;
}
.shop {
    font-size: 18px;
    margin: 20px 0 12px;
}
.bold {
    font-size: 18px;
    margin-right: 0;
}


/* ----------プロフィールページ---------- */
.about_bg img { height: 55vh; }
.nfds_staff { display: block; }
.nfds_staff img { width: 100%; }
.nfds_staff div { width: 100%; }
.nfds_staff hgroup { margin-top: 20px; }
.nfds_staff p {font-size: 14px;}

#news ul, #csr ul { display: block; }
#news ul li, #csr ul li { width: 100%; }
#news .mini, #csr .mini { margin-bottom: 30px; font-size: 12px; }
#news p, #csr p { font-size: 14px; }

.cp table, #nfds_gaiyou table{ 
    border: 1px solid #777;
    font-size: 16px;
}
.cp table th, #nfds_gaiyou table th { width: 100%;}

.last td:last-child {
    border-bottom: solid 1px #777;
    width: 100%;
}
.cp table th, td,
#nfds_gaiyou table th,td{
    border-bottom: none;
    display: block;
    padding: 10px;
}


/* ---------オーダーフローページ--------- */
.com_grid { display: block; }
.step01, .step02, .step03, .step04 {
    width: 70%;
    margin: 0 auto;
    padding: 0;
}
.step01-p h3, .step02-p h3, .step03-p h3, .step04-p h3 {
    text-align: center;
    font-weight: bold;
    margin: 10px auto;
}
.step01-p p, .step02-p p, .step03-p p, .step04-p p {
    font-size: 14px;
    text-align: center;
}
.onegai-p p { font-size: 13px;}


/* ---------デザイン制作費ページ--------- */
.price_grid { display: block; }
.price01, .price02, .price03, .price04, .price05 {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.price01-p h3, .price02-p h3, .price03-p h3, .price04-p h3, .price05-p h3 {
    text-align: center;
    font-weight: bold;
    margin: 10px auto;
}
h4 {
    text-align: center;
    font-size: 18px;
    margin-top: 20px;
}
.price01-p p, .price02-p p, .price03-p p, .price04-p p, .price05-p p {
    font-size: 14px;
    text-align: center;
}
.price01-b, .price02-b, .price03-b, .price04-b {
    margin-bottom: 20px;
}

    
/* -------フッターエリアのスタイル -------*/
#footer { padding: 30px;}

/* ------TOPに戻るボタンのスタイル ------*/
/* #page-top {
    right: 0;
    bottom:30px;
} */
#page-top {
    display: none;
}
    
}/* max-width:640px end */