@charset "utf-8";

/* ==================== INDEX ====================

	A.desktop (min-width: 600px)
	• desktop 

	B.mobile (max-width: 599px)
	• mobile 

==================== INDEX ==================== */


/*==================== 変数 ====================*/
:root {
	--yellow: #ffed1b;
    --base_text: #282828;
    --darkgreen: #0c5b14;
    --beangreen: #4caf00;
    --hisui: #608c65;
    --teagreen: #5f7800;
    --lightstone: #f5f2f1;
    --marron: #603813;
    --iris: #6a7caa;
	--line_gray: #dbdbdb;
    --elegant: #eaeff9;
    --energy: #f68465;
	--gray: #9b9b9b;
	--vp_yellow: #fffffa;
	--char_q: #d53030;
	--char_a: #3070b8;
	--notation: #ed4654;
	--update: #2d980d;
}

/*==================== 基底 ====================*/

*:active {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.anchor_empty {
	color: var(--notation);
}

.notation {
	color: var(--notation);
}

.edited {
	color: var(--update);
}

.base-contents {
    color: #282828;
}

.base-contents > :last-child {
    margin-bottom: 3.125rem;
}


@media all and (min-width: 600px) {

    .base-page,
    .base-contents {
        min-width: 1060px;
    }

    img {
        max-width: unset;
    }

	/*==================== desktop 共用 ====================*/

	.width_std {
		width: 640px !important;
		height: auto !important;
	}
	.height_std {
		width: auto !important;
		height: 640px !important;
	}

    .margin_hside_single {
        margin-right: 68px;
        margin-left: 68px;
    }

	ul.row_gap_none li,
	ol.row_gap_none li {
		margin-bottom: 0;
	}

	div.main_title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
		margin: 1.875rem 0;
        box-sizing: border-box;
        padding-left: 70px;
        min-width: 1000px;
        max-width: 1060px;
        height: 200px;
        border-radius: 15px;
        background: var(--lightstone) url(/tosho/book_making_knowledge/images/page_title_bg.jpg) 0 50% / auto 400px no-repeat;
	}

	div.main_title h1 {
        font-size: 2rem;
        font-weight: 600;
		line-height: 1.25;
        font-feature-settings: "pkna";
        letter-spacing: .12em;
        color: var(--marron);
	}

	h2,
    h3 {
		font-weight: 600;
        font-feature-settings: "pkna";
        letter-spacing: .05rem;
	}

	div.main_footer h3 {
	}

	div.main_footer {
        min-width: 1040px;
        box-sizing: border-box;
		padding: 2.5rem 3.125rem;
		border-width: 1px 0;
		border-style: solid;
		border-color: var(--line_gray);
	}

    div.main_footer .flexcols {
        column-gap: 3.75rem;
    }

    div.main_footer a.button_l {
        padding: 1.5rem 0;
        border-style: none;
        background: rgb(12,91,20);
        background: linear-gradient(180deg, rgba(12,91,20,1) 0%, rgba(96,140,101,1) 100%);
        box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .25);
        color: #fff;
    }

    div.main_footer a.button_l:hover {
        text-decoration: none;
    }

    div.main_footer a.button_l * {
		text-align: center;
    }

	.sticky_parent {
		position: relative;
	}

	.sticky {
		position: sticky;
		z-index: 1;
		top: 1.75rem;
	}

    .inpage_index {
        margin: 1.75rem 0 4rem 0;
        padding: 10px;
        background: var(--lightstone);
    }

    .inpage_index ul {
        list-style: none;
        display: flex;
        column-gap: 10px;
        margin: 0;
        padding: 0;
    }

    .inpage_index li {
        flex: 1;
        margin: 0 !important;
        line-height: 1.25;
        font-size: 1.125rem;
    }

    .inpage_index a {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        column-gap: 1.25rem;
        align-items: center;
        box-sizing: border-box;
        height: 100%;
        padding: 1.75rem .625rem;
        background: #fff;
        color: var(--base_text);
    }

    .inpage_index a:hover {
        text-decoration: none;
    }

    .inpage_index a::before {
        content: "";
        width: 1.5rem;
        min-width: 1.5rem;
        height: 1.5rem;
        background: #fff url(./images/barr_marron.svg) center center / 1.5rem 1.5rem no-repeat;
    }

	section.inpage_anchor_parent {
		margin-bottom: 5rem;
	}

    .back_inpage_index {
        text-align: right;
    }

    .back_inpage_index a {
        display: inline-block;
        border: 1px solid var(--line_gray);
        border-radius: 2rem;
        font-size: 0.875rem;
        line-height: 1.25;
        padding: .25rem 1.5rem .25rem 3rem;
        background: url(/tosho/_str/images/tarr_s.svg) 1.25rem 50% / 13px auto no-repeat;
        color: var(--marron);
    }

    .back_inpage_index a:focus,
    .back_inpage_index a:hover {
        text-decoration: none;
    }

	.box {
		margin-bottom: 1.75em;
		padding: 1.5rem;
		background: var(--lightstone);
	}

    .box_elegant {
        background: var(--elegant);
    }

	.sidebar .box {
		padding: 1rem;
	}

	.box > :first-child {
		margin-top: 0;
	}

	.box > :last-child {
		margin-bottom: 0;
	}

	.box.recommendation {
		padding: 1.5rem;
	}

    .sidebar ul.banners {
        list-style: none;
        margin-top: 0;
        padding: 0;
    }

    .sidebar ul.banners li {
        margin-bottom: .875rem;
    }

    .sidebar a.banner {
        display: block;
        max-width: 236px;
        padding: 4px;
        border: 1px solid var(--darkgreen);
    }

    .sidebar a.banner img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }

    a.button_attention {
        display: block;
        box-sizing: border-box;
        padding: .875rem .875rem .875rem 2.5rem;
        border-radius: 4px;
        background: var(--energy) url(./images/rarr_white.svg) .875rem center / 16px 16px no-repeat;
        color: #fff;
        font-weight: 600;
        text-align: center;
    }

    a.button_attention:focus,
    a.button_attention:hover,
    a.button_attention:active {
        text-decoration: none;
    }

	a.button_l {
		display: block;
		padding: 1rem 0;
		border: 1px solid var(--gray);
		background: var(--vp_yellow);
	}

	a.button_l > h3,
	a.button_l > p {
		margin: 0;
	}

	ul.buttons_v {
		list-style: none;
		margin-top: 0;
		padding: 0;
	}

	ul.buttons_v li {
		line-height: 1.5;
		margin-bottom: .75rem;
	}

	ul.buttons_v li p {
		margin: .875rem 0;
	}

	ul.buttons_v li.separate_before {
		padding-top: .75rem;
		border-top: 1px solid var(--line_gray);
	}

	.buttons_v a {
		display: block;
		padding: 1.25rem;
		border: 1px solid var(--line_gray);
		background: var(--vp_yellow);
	}

	ul.buttons_v .banner {
		position: relative;
	}

	ul.buttons_v .banner::before {
		content: "banner";
		display: block;
		padding: .25rem .5rem;
		position: absolute;
		z-index: 2;
		background: var(--gray);
		color: #fff;
		font-size: .875rem;
	}

	ul.buttons_v .banner a {	
		padding: 3.5rem 1.25rem;
	}

	ul.buttons_h {
		list-style: none;
		display: flex;
		column-gap: 1rem;
		padding: 0;
	}

	ul.buttons_h.align_center {
		justify-content: center;
	}

	ul.buttons_h li {
		margin: 0;
		line-height: 1.5;
	}

	ul.buttons_h li.flex_grow_1 {
		flex: 1;
	}

	.buttons_h a {
		display: block;
		padding: 1.25rem;
		border: 1px solid var(--line_gray);
		background: var(--vp_yellow);
	}

	.ico_q {
		padding-left: 3rem !important;
		background-image: url(/demo_images/question.svg) !important;
		background-position: 1rem 50% !important;
		background-size: 1.5rem auto !important;
		background-repeat: no-repeat !important;
	}

	/*----- format -----*/

    .text_box {
        width: 720px;
        padding-bottom: 1.75rem;;
    }

    .text_box ul.style_none {
        padding-left: 68px;
    }

	/*----- format_a -----*/

    .format_a .flexcols.main_sidebar {
        column-gap: 28px;
    }

	.format_a .flexcols.main_sidebar > .col.main {
		width: 788px;
	}

	.format_a .flexcols.main_sidebar > .col.sidebar {
        position: relative;
		width: 244px;
	}

    #faq .flexcols.main_sidebar > .col.sidebar #pickup_contents,
    #book_making_knowledge .flexcols.main_sidebar > .col.sidebar #pickup_contents {
        position: sticky;
        top: 40px;
        margin-bottom: 40px;
    }

    #book_making_knowledge .flexcols.main_sidebar > .col.sidebar #pickup_contents_2 {
        top: 40px;
        margin-bottom: 40px;
    }

    #book_making_knowledge #hon-gakko-com {
        width: 100%;
        height: 75%;
    }

	.format_a .main h2.sec_title {
        margin: 3.125rem 0 1.875em 0;
        display: flex;
        align-items: center;
        column-gap: 1em;
		font-size: 1.5rem; /* 24pt based 16pt */
		color: var(--base_text);
        padding-bottom: .5rem;
        border-bottom: 1px solid var(--line_gray);
	}

    .format_a .main h2.sec_title::before {
        content: "";
        width: 68px;
        height: 68px;
		background: url(./images/h2_ico_book.png) left center /  68px 68px no-repeat;
    }

    .format_a .main .text_box h2 {
        margin-right: -68px;
    }

	.format_a .sidebar h2,
	.format_a .sidebar .h2,
	.format_a .sidebar h3,
	.format_a .sidebar .h3 {
		font-size: .875rem; /* 14pt based 16pt */
	}

    .format_a .sidebar h2.telling {
        display: flex;
        align-items: center;
        column-gap: 1em;
        box-sizing: border-box;
        font-feature-settings: "pkna";
    }

    .format_a .sidebar h2.telling::before {
        content: "";
        height: 90px;
        width: 4px;
        min-width: 4px;
        background: var(--base_text);
    }

	.format_a .main h3.sec_title {
        padding: 1rem 1.25rem;
        background: var(--iris);
        color: #fff;
	}

	.format_a .main h3.feature {
        padding: 1rem 1.25rem;
        background: var(--lightstone);
        color: var(--darkgreen);
	}

    .format_a .sidebar a.button_attention {
        font-size: 1rem;
        font-feature-settings: "palt";
        letter-spacing: .02em;
    }

    .format_a .box_compact {
        margin-right: 68px;
        margin-left: 68px;
        padding: 20px;
    }

	table.std th {
		background: var(--lightstone) !important;
        border: solid 1px var(--line_gray);
        color: var(--darkgreen);
	}

	table.std td {
        border: solid 1px var(--line_gray);
	}

    dl.feature {
        margin-top: 3.125rem;
        display: flex;
        align-items: center;
        column-gap: 28px;
        color: var(--darkgreen);
    }

    .feature dt {
        margin-top: 0;
        flex-basis: 108px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }

    .feature dt::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 72px;
        height: 4px;
        background: var(--yellow);
    }

    .feature dt span.large {
        margin-top: 0;
        padding-left: .25rem;
        font-size: 2.5rem;
        font-style: italic;
    }

    .feature dd {
        flex-basis: 584px;
        font-weight: 600;
    }

	/*==================== desktop グローバルメニュー ====================*/
  
	#main_menu_container {
        position: relative;
        overflow: hidden;
	}

    #site_name {
        position: absolute;
        z-index: 2;
        left: 10px;
        top: -5px
    }

    #site_name img {
        width: 80px;
        height: 80px;
        vertical-align: bottom;
    }

	#main_menu_container .global_menu_label,
	#main_menu_toggle {
		display: none;
	}
  
	#global_menu {
        min-width: 1000px;
        max-width: 1060px;
        box-sizing: border-box;
        list-style: none;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        background: rgb(12,91,20);
        background: linear-gradient(180deg, rgba(12,91,20,1) 0%, rgba(96,140,101,1) 100%);
	}

    #site_name ~ #global_menu {
        padding-left: 100px;
    }
  
	#global_menu li {
        flex: 1;
        margin: 0;
        padding: 0;
        font-feature-settings: "palt";
        letter-spacing: .05em;
	}

    #global_menu #gm_home {
        display: none;
    }
  
	#global_menu li > a {
        transition: background-color .2s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 1rem;
        min-height: 70px;
        cursor: pointer;
        white-space: nowrap;
        color: #fff;
	}
  
	#global_menu li > a:focus,
    #global_menu li > a:hover {
        text-decoration: none;
        opacity: 1;
        background-color: var(--darkgreen);
	}
    
    #global_menu li > a:active {
        text-decoration: none;
        opacity: 1;
        background: var(--darkgreen);
	}
  
	#global_menu li.current > a {
        background: var(--darkgreen);
        border-bottom-style: none;
	}

	/*==================== desktop 新潮社　図書編集室について ====================*/
    
    #about_us .text_box {
        margin: 3.75rem 0 3.75rem 68px;
        width: 652px;
    }

    #about_us .text_box p {
        margin: 0;
        line-height: 2;
        text-indent: 1em;
    }

    #about_us .text_box p.new_sec {
        margin-top: 2em;
    }

    #about_us .text_box p.sign {
        margin-top: 4em;
    }

	/*==================== desktop 新潮社の自費出版について ====================*/

    #page_about .main_title {
        height: 353px;
        background:
            url(/tosho/about/images/h1_a.jpg) left top / 530px 353px no-repeat,
            url(/tosho/about/images/h1_b.jpg) right top / 530px 353px no-repeat;
        text-shadow: 0px 1px 5px var(--gray), 0px 1px 3px #000, 0px 1px 3px #000;
    }

    #page_about .main_title h1 {

        letter-spacing: .08em;
        color: #fff;
    }

	/*==================== desktop 広告宣伝サポートサービス ====================*/

    h3.special_offer {
        font-size: 1rem;
        font-weight: normal;
        line-height: 1.75em;
    }

    #sales_support .box_elegant {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .ad_lineup {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 28px;
        row-gap: 24px;
    }

    .ad_lineup .grid_item {
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        border: solid 1px var(--base_text);
        display: flex;
        padding: 2rem 1.5rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ad_lineup .grid_item h4 {
        margin-bottom: 0;
    }

    .ad_lineup .grid_item::before {
        position: absolute;
        top: 0;
        right: 0;
        transform-origin: 100% 0px;
        z-index: -1;
        transform: translate(100px, 0px) rotate(45deg);
        content: "";
        width: 800px;
        height: 800px;
        background: var(--yellow);
    }

    .ad_lineup .item_a {
		grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .ad_lineup .item_b {
		grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .ad_lineup .item_c {
		grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .ad_lineup .item_d {
		grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    .ad_lineup h4 {
        margin-top: 0;
        margin-bottom: .875rem;
        font-size: 1.5rem;
    }

    .ad_lineup p {
        margin-top: .875rem;
        margin-bottom: .875rem;
    }

    .ad_lineup img {
        width: auto;
        height: 222px;
		box-shadow:
			0 0px 7px rgba(0, 0, 0, 0.3),
			0 5px 12px rgba(0, 0, 0, 0.52)
		;
    }

	/*==================== desktop ストーリーズ ====================*/

	#stories .lay_grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 28px;
        row-gap: 4.375rem;
        margin-top: 50px;
	}

    #stories .lay_colmun {
        display: flex;
    }

    #stories .lay_colmun .col:first-child {
        flex-basis: 250px;
    }

    #stories .lay_colmun .col:last-child {
        flex-basis: 257px;
    }

    #stories .thumb img {
        width: 244px;
        height: auto;
    }

    #stories .book_title {
        font-size: 1.25rem;
        padding-bottom: .25rem;
        border-bottom: 2px solid var(--base_text);
        margin-bottom: 0;
    }

    #stories .author {
        margin-top: .25rem;
    }

    #stories .description p {
        font-size: 0.875rem;
    }

    #stories .from_editor {
        border-top: 1px solid var(--line_gray);
    }

    #stories .from_editor p {
        margin-top: .875rem;
        color: var(--beangreen);
        font-size: 0.875rem;
        font-weight: 600;
    }

    #stories .tags {
        min-height: 5rem;
    }
	
	#stories .tag {
		list-style: none;
		display: inline-block;
		margin: 0;
		padding: 0;
		font-weight: 300;
	}

	#stories .tag li {
		display: inline-block;
		font-size: .8125rem;
		margin-bottom: .5rem;
	}

	#stories .genre a,
	#stories .genre span {
		display: inline-block;
		padding: 0 1rem;
		margin-right: .125rem;
		border-radius: 2rem;
		background: var(--elegant);
	}

	#stories .service a,
	#stories .service span {
		display: inline-block;
		padding: 0 1rem;
		margin-right: .125rem;
		border-radius: 2rem;
		background: var(--lightstone);
	}

	#stories .book_format {
		margin: 0 0 0 35px;
		padding-left: 1.25rem;
	}

	#stories .book_format li {
		margin: 0;
		font-size: .8125em;
	}


	/*==================== desktop 新潮社の自費出版について > 本作りの専門家 ====================*/

	#professionals {
		margin-top: 4rem;
	}

    #professionals .grid_item {
        background: var(--lightstone);
        padding: 20px;
    }

    #professionals .grid_item h3 {
        margin-top: 20px;
        text-align: center;
        color: var(--darkgreen)
    }

	#professionals .grid_container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}


	#professionals .grid_container .inner {
		display: flex;
		flex-direction: column;
		column-gap: 2rem;
		overflow: hidden;
	}

	#professionals .grid_container .primary {
		flex-grow: 1;
		flex-basis: 40%;
	}

	#professionals .grid_container .secondary {
		flex-grow: 1;
		flex-basis: 60%;
	}

	#jihisyuppan th,
	#jihisyuppan td {
		padding: 1.25rem;
	}

	#jihisyuppan .th1 {
		width: 25%;
	}

	#jihisyuppan .td1 {
		width: 75%;
	}

	#jihisyuppan th[scope="row"] {
		text-align: left;
		font-weight: bold;
	}

    #jihisyuppan table h4 {
        margin: 0;
        display: flex;
        align-items: center;
        column-gap: .5rem;
    }

    #jihisyuppan table h4::before {
        content: "";
        width: 22px;
        height: 12px;
        background: url(./images/rarr_long_green.svg) left center / 22px 12px no-repeat;
    }

    #jihisyuppan table ul:last-child {
        margin-bottom: 0;
    }

    #jihisyuppan table p {
        margin: 0;
        font-size: .875rem;
    }

    #jihisyuppan table li {
        font-size: .875rem;
    }

	/*==================== desktop よくあるご質問（FAQ） ====================*/

	#faq ._foldingBlock_ {
		border-style: none;
	}
	
	#faq ._foldingBlock_ > .unit {
		position: relative;
		overflow: hidden;
		border-style: none;
	}
	
	#faq ._foldingBlock_ .toggle_heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid var(--line_gray);
        border-radius: 4rem;
		padding: 2em 1.5em;
        margin-bottom: 2rem;
	}

    #faq ._foldingBlock_ .toggle_heading::after {
        transition: transform .4s;
        content: "";
        display: block;
        width: 40px;
        height: 14px;
        background: url(/tosho/_str/images/ico_block_open.svg) center top / 24px auto no-repeat;
    }

    #faq ._foldingBlock_ .stat:checked ~ .toggle_heading::after {
        transform: rotate(-180deg);
    }

	#faq ._foldingBlock_ .stat:checked ~ .toggle_heading {
        margin-bottom: 0;
		border-color: var(--lightstone);
        background: var(--lightstone);
	}

    #faq ._foldingBlock_ .toggle_container {
        transition-duration: .5s;
    }

	#faq ._foldingBlock_ .stat:checked ~ .toggle_container {
		height: auto;
		opacity: 1;
		visibility: visible;
		padding: 1.5rem 0;
	}

	#faq ._foldingBlock_ .toggle_container .inner {
		display: inline-block;
		padding: 0;
		margin-bottom: 0;
	}

	#faq .question {
		position: relative;
		padding: 0 0 0 4rem;
		font-size: 1rem;
	}

	#faq .answer {
		position: relative;
		padding: 0 68px 0 5.5rem;
	}

	#faq h2 + .question {
		border-top: none;
	}

	#faq .answer :first-child {
		margin-top: 0;
        padding-top: 1rem;
	}


	#faq .question span.num {
		display: block;
		position: absolute;
		z-index: 2;
		top: -0.5rem;
		left: 0;
		margin-right: 2.4rem;
		line-height: 2.4rem;
		width: 2.4rem;
		text-align: center;
		content: "Q";
        color: var(--marron);
		font-size: 1.25rem; /* 24pt based 16pt */
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
		font-weight: bold;
	}

	#faq .answer::before {
        opacity: 0;
		display: block;
		position: absolute;
		z-index: 2;
		top: 0;
		left: 1rem;
		line-height: 3.5rem;
		width: 3.5rem;
		text-align: center;
		content: "A";
		border: 1px solid var(--marron);
        border-radius: 4rem;
		color: var(--marron);
		font-size: 1.25rem; /* 24pt based 16pt */
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
		font-weight: bold;
	}

    #faq ._foldingBlock_ .stat:checked ~ .toggle_container .answer::before {
        opacity: 1;
    }


	/*==================== desktop 料金のめやす ====================*/

	table.std thead th,
	table.std thead th[conspan] {
		background: var(--vp_yellow) !important;
	}

	table.std tbody th,
	table.std tbody th[conspan] {
		background: var(--lightstone) !important;
	}

    #price_list .flexcols.example {
        column-gap: 28px;
        margin-bottom: 28px;
    }

    #price_list .book_title {
        margin: 0 0 1.75rem 0;
        line-height: 1.5;
        font-size: 2rem;
        font-weight: normal;
        font-feature-settings: pkna;
    }

    #price_list .the_price {
        text-align: right;
        font-size: 2rem;
    }

    #price_list .the_price span {
        display: inline-block;
        border-bottom: 3px solid var(--base_text);
        font-feature-settings: "palt";
    }

    #price_list .the_price small {
        display: inline-block;
        margin-left: .25rem;
        font-size: 1rem;
    }

    #price_list ul.recommendation_point {
        list-style: none;
        padding: 0;
    }

    #price_list ul.recommendation_point li {
        margin: 0;
        font-size: 1.3125rem;
        font-weight: 600;
    }

    #price_list .service_property {
        list-style: none;
        padding: 0;
    }

    #price_list .service_property li {
        margin-bottom: 5px;
        padding: 1.25rem 1.25rem 1.25rem 68px;
        background: var(--lightstone) url(/tosho/_str/images/ico_check_point.svg) 15px 50% / 32px 30px no-repeat;
        line-height: 1.5;
        font-size: 1.125rem;
    }


	/*==================== desktop 本作りの流れ ====================*/

    #book_making .main_title {
        height: 400px;
        column-gap: 1rem;
        background-image: none;
    }

    #book_making .main_title .eyecatch {
        min-width: 460px;
    }

    .box.optional_service {
        padding: 1.875rem;
    }

    .box.optional_service .box_heading {
        display: flex;
        column-gap: 1.75rem;
        margin-bottom: 1.875rem;
        padding: .625rem;
    }

    .box.optional_service .box_heading .service_logo {
        flex-basis: 136px;
        min-width: 136px;
        flex-shrink: 1;
    }

    .box.optional_service .box_heading .text {
        flex-grow: 1;
    }

    .box.optional_service h2 {
        color: var(--marron);
        font-size: 1.75rem;
    }

    .box.optional_service .box {
        padding: 1.875rem 1.25rem 1.25rem 1.875rem;
        background: #fff;
        border: 1px solid var(--teagreen)
    }

    .box.optional_service .box h3 {
        line-height: 2;
        margin-bottom: 1.25rem;
        color: var(--teagreen);
    }

    .box.optional_service .lay_colmun {
        display: flex;
        padding: .625rem 1.875rem 1.25rem 1.875rem;
        justify-content: space-between;
        align-items: center;
    }

    .box.optional_service .lay_colmun h4 {
        font-size: 1.5rem;
        font-weight: 600;
        border-bottom: 2px solid var(--yellow);
    }

    .box.optional_service a.button_attention {
        min-width: 240px;
    }
	
	#flow_book_making {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
        margin: .625rem 68px 0 0;
	}

	#flow_book_making .grid_item {
		position: relative;
        overflow: visible;
        margin-left: 48px;
        padding-bottom: 3.125rem;
		grid-column: 1 / 3;
        border-left: 6px solid var(--line_gray);
	}

    #flow_book_making .grid_item:last-child {
        margin-top: -1.5rem;
        border-color: transparent;
    }

    #flow_book_making .grid_item.split,
    #flow_book_making .grid_item.merge {
        position: relative;
        overflow: hidden;
        height: 80px;
        padding-bottom: 0;
    }

    #flow_book_making .grid_item.split::before {
        content: "";
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 160px;
        border-radius: 40px;
        border: 6px solid var(--line_gray);
        margin-left: calc(-50% + 27px);
    }

    #flow_book_making .grid_item.merge::before {
        content: "";
        bottom: 0;
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 160px;
        border-radius: 40px;
        border: 6px solid var(--line_gray);
        margin-top: -120px;
        margin-left: calc(-50% + 27px);
    }

	#flow_book_making .grid_item.item_f,
	#flow_book_making .grid_item.item_g {
		grid-column: 1 / 2;
	}

	#flow_book_making .grid_item.item_h {
		grid-column: 2 / 3;
		grid-row: 7 / 9;
		align-self: stretch;
	}

	#flow_book_making .grid_item .inner {
		display: flex;
        flex-direction: column;
	}

	#flow_book_making .grid_item .inner div > *:first-child {
		margin-top: 0;
	}

	#flow_book_making .grid_item .inner div > *:last-child {
		margin-bottom: 0;
	}

	#flow_book_making .primary {
        padding-left: 16px;
		flex-grow: 1;
		flex-basis: 40%;
	}

    #flow_book_making h2 {
        position: relative;
        display: flex;
        align-items: center;
        column-gap: 1rem;
    }

    #flow_book_making h2 .num {
        position: relative;
        z-index: 2;
        margin-left: -51px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 4rem;
        min-width: 4rem;
        height: 4rem;
        border: 1px solid var(--marron);
        border-radius: 50%;
        background: #fff;
        color: var(--marron);
        font-size: 2rem;
    }

    #flow_book_making h2 .num.large {
        width: 5rem;
        min-width: 5rem;
        height: 5rem;
        border-width: 4px;
        margin-left: -64px;
        font-size: 3rem;
    }

    #flow_book_making h2 .num + span {
        border-bottom: 1px solid var(--marron);
        margin: 1rem 0;
    }

    #flow_book_making h2 strong {
        font-size: 3rem;
        font-weight: 300;
    }

	#flow_book_making .secondary {
        padding-left: 48px;
		flex-grow: 1;
		flex-basis: 60%;
	}

	#flow_book_making .secondary img {
        width: 244px;
        height: auto;
    }

	#flow_book_making .secondary img.small {
        width: 176px;
        height: auto;
    }

    #flow_book_making .lay_colmun {
        display: flex;
        align-items: flex-start;
        column-gap: 28px;
    }

    #flow_book_making .lay_colmun.col_reverse {
        flex-direction: row-reverse;
    }

    #flow_book_making .lay_colmun p:first-of-type {
        margin-top: 0;
    }

    #flow_book_making .lay_colmun p:last-of-type {
        margin-bottom: 0;
    }

	#flow_book_making .grid_item.item_f .inner,
	#flow_book_making .grid_item.item_g .inner,
	#flow_book_making .grid_item.item_h .inner {
		display: flex;
		flex-direction: column;
		column-gap: 2rem;
	}

	#flow_book_making .grid_item.item_f .primary,
	#flow_book_making .grid_item.item_g .primary,
	#flow_book_making .grid_item.item_h .primary {
		flex-basis: auto;
	}

	#flow_book_making .grid_item.item_f .secondary,
	#flow_book_making .grid_item.item_g .secondary,
	#flow_book_making .grid_item.item_h .secondary {
		flex-basis: auto;
	}

	#flow_book_making .grid_item:not(:last-child)::after {
		content: "";
		display: block;
		position: absolute;
		z-index: 2;
		bottom: -90px;
		width: 100%;
		height: 146px;
		line-height: 1;
		text-align: center;
		background: url(/demo_images/barr.svg) center center / 75px auto no-repeat;
	}

	/*==================== desktop 本作りの基礎知識 ====================*/

    #book_making_knowledge .main_title {
        column-gap: 30px;
        position: relative;
        overflow: hidden;
        height: 400px;
        margin-bottom: 3.125rem;
        background: var(--lightstone) url(/tosho/book_making_knowledge/images/page_title_bg.jpg) 0 50% / 756px 561px no-repeat;
    }

    #book_making_knowledge .main_title .eyecatch img {
        width: 514px;
        height: 480px;
    }

    #book_making_knowledge figcaption {
        font-weight: 600;
        color: var(--darkgreen);
    }

    #book_making_knowledge ul.lay_column {
        list-style: none;
        padding: 0;

    }

    #book_making_knowledge ul.lay_column li {
        overflow: hidden;
        border-top: 1px solid var(--line_gray);
        padding: 1rem 0;
    }

    #book_making_knowledge ul.lay_column h3 {
        margin: 0;
        float: left;
        width: 244px;
        color: var(--marron);
        font-size: 1.25rem;
        font-weight: normal;
    }

    #book_making_knowledge ul.lay_column li > *:not(h3) {
        margin-left: 272px;
    }

	/*==================== desktop 特製革装本 ====================*/
    
    #luxury_book .text_box {
        margin: 3.75rem 0 3.75rem 68px;
    }

    #luxury_book .main_title {
        height: 400px;
        overflow: hidden;
        column-gap: 1rem;
        background-image: none;
    }

    #luxury_book .main_title .text {
        flex-basis: 45%;
        position: relative;
    }

    #luxury_book .main_title .eyecatch {
        overflow: hidden;
        flex-basis: 55%;
        height: 400px;
    }

    #luxury_book .main_title .eyecatch img {
        height: 100%;
        width: auto;
    }

    #luxury_book .main_title .text {
        position: relative;
    }

    #luxury_book .main_title .text .adjust {
        position: absolute;
        padding-right: 50px;
        z-index: 2;
        transform: translateY(-50%);
    }

    #luxury_book .main {
        margin-bottom: 4.375rem;
    }

    #luxury_book .main p {
        line-height: 2;
    }

    #luxury_book .lay_grid {
        display: grid;
        grid-template-columns: repeat(16, 40px);
        gap: 28px;
        align-items: center;
        margin-bottom: 4.375rem;
    }

    #luxury_book .item_a {
        grid-column: 10 / 16;
        grid-row: 1 / 2;
    }

    #luxury_book .item_b {
        grid-column: 2 / 10;
        grid-row: 1 / 2;
    }

    #luxury_book .item_c {
        grid-column: 2 / 9;
        grid-row: 2 / 3;
    }

    #luxury_book .item_d {
        grid-column: 9 / 16;
        grid-row: 2 / 3;
    }

    #luxury_book .item_e {
        grid-column: 11 / 15;
        grid-row: 3 / 4;
    }

    #luxury_book .item_f {
        grid-column: 2 / 11;
        grid-row: 3 / 4;
    }

    #luxury_book .box {
        border: 4px double var(--line_gray);
        background: #fff;
        padding: 50px 50px 20px 50px;
    }

    #luxury_book .box_heading h2 {
        margin: 0 0 .625rem 0;
        font-size: 2rem;
        font-weight: 600;
        color: var(--marron);
    }

    #luxury_book .box_heading h3 {
        margin: 0 0 1.5rem 0;
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--marron);
    }

    #luxury_book .box ul.indent_none li {
        font-size: 1.125rem;
    }

    #luxury_book .box ul.indent_none li::before {
        content: "◆";
        display: inline-block;
        margin-right: .5rem;
        color: var(--hisui);
    }

    #luxury_book .lay_col {
        display: flex;
        align-items: center;
        align-items: center;
        justify-content: space-around;
        column-gap: 28px;
    }

        #luxury_book .lay_col .thumb {
            transform: translateY(-20px);
        width: 132px;
        height: auto;    
    }


	/*==================== desktop ホーム ====================*/

	#front_cover {
        position: relative;
        min-width: 1040px;
		height: 450px;
		background: #fff url(/tosho/_str/images/loading.gif) center center / 50px 50px no-repeat;
	}

    #front_cover::before {
        content: "";
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
		background: #fbf8f2 url(./images/home_cv_bg.png) -180px -44px / 965px auto;
    }

	#front_cover .item_a {
        position: absolute;
        z-index: 2;
        left: 96px;
        top: 45px;
	}

	#front_cover .item_b1 {
        position: absolute;
        z-index: 2;
        left: 463px;
        top: 34px;
	}

	#front_cover .item_b2 {
        position: absolute;
        z-index: 2;
        left: 797px;
        top: 34px;
	}

	#front_cover .item_b3 {
        position: absolute;
        z-index: 2;
        left: 629px;
        top: 170px;
	}

	#front_cover .item_b4 {
        position: absolute;
        z-index: 2;
        left: 463px;
        top: 324px;
	}

	#front_cover .item_b5 {
        position: absolute;
        z-index: 2;
        left: 797px;
        top: 324px;
	}

    #front_cover .service_name h1 {
        margin: 0;
        line-height: 1;
        width: 270px;
        height: auto;
    }

    #front_cover .service_name .below_title {
        margin: 0;
        line-height: 1;
        width: 270px;
        height: auto;
    }

    #front_cover .service_name img {
        width: 100%;
        vertical-align: bottom;
    }

    #front_cover img.msg {
        position: absolute;
        z-index: 2;
        left: 130px;
        top: -23px;
        width: 105px;
        height: 105px;
        vertical-align: bottom;
    }

    #front_cover img.ph {
        width: 158px;
        height: auto;
        vertical-align: bottom;
    }

	#main_menu_container + .lead {
		padding: .25rem;
	}

	#home_view {
        min-width: 1040px;
		margin: 0 0 3.125rem 0;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: minmax(100px, auto);
		column-gap: 2.5rem;
	}

	#home_view > .grid_item.item_a {
		grid-column: 1 / 13;
		grid-row: 1 / 2;
	}

	#home_view > .grid_item.item_b {
		grid-column: 1 / 9;
		grid-row: 2 / 3;
	}

	#home_view > .grid_item.item_b h2 {
		margin-top: 6px;
	}

	#home_view > .grid_item.item_c {
		grid-column: 9 / 13;
		grid-row: 2 / 3;
	}

	#home_view h2 {
		font-size: 1.6875rem; /* 27px base on 16px */
        color: var(--marron);
		text-align: center;
        font-feature-settings: "palt";
        letter-spacing: .1rem;
	}

    #home_view > div:first-child {
        padding-bottom: 30px;
        border-bottom: 1px solid var(--line_gray);
        margin-bottom: 30px;
    }

    #home_view #new_arrivals_title {
        padding-top: 30px;
        display: flex;
        justify-content: center;
        background: var(--lightstone);
    }

	#home_view #new_arrivals_title h2 {
        margin-top: 0;
        position: relative;
        font-feature-settings: "pkna";
	}

	#home_view h2 .time {
        position: absolute;
        z-index: 2;
        top: .2rem;
        right: calc(100% + 20px);
        display: block;
        line-height: 1;
        padding: 10px 20px;
        border-radius: 20px;
        white-space: nowrap;
		font-size: .875rem; /* 14px base on 16px */
        font-weight: 600;
        letter-spacing: normal;
        background: #fff;
        color: var(--darkgreen);
	}

	#home_view > .grid_item.item_d h3 {
		margin-top: 0;
	}

	#home_view #new_arrivals {
        background: var(--lightstone);
		list-style: none;
		display: flex;
		justify-content: space-between;
        margin: 0;
		padding: 0 2rem;
		column-gap: 1.75rem;
	}

	#home_view #new_arrivals > li {
        flex: 1;
		margin: 0;
	}

	#home_view #new_arrivals span.thumb {
		display: block;
        text-align: center;
		padding-bottom: .875rem; /* 14px base on 16px */
	}

	#home_view #new_arrivals a {
		display: block;
	}

	#home_view #new_arrivals img {
        transition: transform .4s;
		width: auto;
		height: 160px;
		vertical-align: bottom;
	}

	#home_view #new_arrivals a:hover img {
		transform: scale(115%);
	}

	#home_view #new_arrivals dt {
		margin-top: 0;
        line-height: 1.5;
		font-size: .875rem; /* 14px base on 16px */
	}

    #home_view ._snapSliderT_ nav {
        display: none;
    }

	#home_view #new_arrivals dd {
        line-height: 1.5;
		font-size: .75rem; /* 12px base on 16px */
	}

	#home_view .tag {
		list-style: none;
		padding: 0;
        margin-bottom: 2rem;
	}

	#home_view .tag li {
		margin-bottom: .8rem;
		display: inline-block;
        font-weight: 400;
	}

	#home_view .tag a {
		display: inline-block;
		padding: .3rem 2rem;
		margin-right: .5rem;
		border-radius: 2rem;
		background: var(--elegant);
        color: var(--base_text);
	}

	#home_view .tag a:focus,
    #home_view .tag a:hover,
    #home_view .tag a:active {
		text-decoration: none;
	}

	#home_view .recommendation h3 {
        margin: 0 3.25rem 1.75rem 3.25rem;
        padding: 1.5rem 0;
        text-align: center;
        font-weight: 600;
        background: var(--yellow);
        color: var(--base_text);
    }

    #home_view #pickup_contents ul.banners {
        list-style: none;
        margin-top: 0;
        padding: 0;
    }

    #home_view #pickup_contents ul.banners li {
        margin-bottom: .875rem;
    }

    #home_view #pickup_contents a.banner {
        display: block;
        width: 315px;
        padding: 4px;
        border: 1px solid var(--darkgreen);
    }

    #home_view #pickup_contents a.banner img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }

	/*==================== desktop ホーム アニメーション ====================*/

    @keyframes intro_bg {
        0% {
            opacity: 0;
            background-position: -180px -44px;
        }
        5% {
            opacity: 1.0;
            background-position: -180px -62px;
        }
        20% {
            opacity: 1.0;
            background-position: -180px -116px;
        }
        95% {
            opacity: 1.0;
            background-position: -180px -386px;
        }
        100% {
            opacity: 1.0;
            background-position: -180px -404px;
        }
    }

    #front_cover::before {
        opacity: 0;
    }

    ._doneOpening_ #front_cover {
        opacity: 1;
        background: none;
    }

    ._doneOpening_ #front_cover::before {
        opacity: 1;
        background-position: -180px -404px;
    }

    ._LoadingIsCompleted_ #front_cover::before {
        animation: intro_bg 8.8s linear 0s 1 normal forwards;
    }

    @keyframes intro_msg {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0px);
        }
    }

    #front_cover .anime_intro .msg {
        opacity: 0;
    }

    ._doneOpening_ #front_cover .anime_intro .msg {
        opacity: 1;
    }

    ._LoadingIsCompleted_ #front_cover .anime_intro .msg {
        animation: intro_msg 2.4s ease-out 0s 1 normal forwards;
    }

	._LoadingIsCompleted_ #front_cover .item_b1 .msg {
        animation-delay: 1.5s;
    }

	._LoadingIsCompleted_ #front_cover .item_b2 .msg {
        animation-delay: 2.9s;
    }

	._LoadingIsCompleted_ #front_cover .item_b3 .msg {
        animation-delay: 4.3s;
    }

	._LoadingIsCompleted_ #front_cover .item_b4 .msg {
        animation-delay: 3.6s;
    }

	._LoadingIsCompleted_ #front_cover .item_b5 .msg {
        animation-delay: 2.2s;
    }

    @keyframes intro_ph {
        0% {
            opacity: 0;
            transform: translateX(20px);
        }
        100% {
            opacity: 1;
            transform: translateX(0px);
        }
    }

    #front_cover .anime_intro .ph {
        opacity: 0;
    }

    ._doneOpening_ #front_cover .anime_intro .ph {
        opacity: 1;
    }

    ._LoadingIsCompleted_ #front_cover .anime_intro .ph {
        animation: intro_ph 2.4s ease-out 0s 1 normal forwards;
    }

	._LoadingIsCompleted_ #front_cover .item_b1 .ph {
        animation-delay: 1.5s;
    }

	._LoadingIsCompleted_ #front_cover .item_b2 .ph {
        animation-delay: 2.9s;
    }

	._LoadingIsCompleted_ #front_cover .item_b3 .ph {
        animation-delay: 4.3s;
    }

	._LoadingIsCompleted_ #front_cover .item_b4 .ph {
        animation-delay: 3.6s;
    }

	._LoadingIsCompleted_ #front_cover .item_b5 .ph {
        animation-delay: 2.2s;
    }

    @keyframes attention_title {
        0% {
            opacity: 0;
            transform: scale(110%);
        }
        100% {
            opacity: 1;
            transform: scale(100%);
        }
    }

    #front_cover .title {
        opacity: 0;
    }

    ._doneOpening_ #front_cover .title {
        opacity: 1;
    }

    ._LoadingIsCompleted_ #front_cover .title {
        animation: attention_title 1.6s ease-out 5.0s 1 normal forwards;
    }

    #front_cover .below_title {
        opacity: 0;
    }

    ._doneOpening_ #front_cover .below_title {
        opacity: 1;
    }

    ._LoadingIsCompleted_ #front_cover .below_title {
        opacity: 0;
        animation: attention_title 1.2s ease-out 5.4s 1 normal forwards;
    }

    @keyframes attention_gm {
        0% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-10px);
        }
        100% {
            transform: translateY(0px);
        }
    }

    .home._LoadingIsCompleted_ #global_menu li > a {
        animation: attention_gm .8s ease-out 0s 1 normal forwards;
    }

    .home._LoadingIsCompleted_ #global_menu li:nth-child(1) > a {
        animation-delay: 6.8s;
    }

    .home._LoadingIsCompleted_ #global_menu li:nth-child(2) > a {
        animation-delay: 7.0s;
    }

    .home._LoadingIsCompleted_ #global_menu li:nth-child(3) > a {
        animation-delay: 7.1s;
    }

    .home._LoadingIsCompleted_ #global_menu li:nth-child(4) > a {
        animation-delay: 7.2s;
    }

    .home._LoadingIsCompleted_ #global_menu li:nth-child(5) > a {
        animation-delay: 7.3s;
    }

    .home._LoadingIsCompleted_ #global_menu li:last-child > a {
        animation-delay: 7.4s;
    }

}


@media all and (max-width: 599px) {

    ul {
        list-style: disc;
    }

	/*==================== mobile 共用 ====================*/

	.width_std,
	.height_std {
		width: 80vw !important;
		height: auto !important;
	}

	.sidebar {
        border-top: 1px solid var(--line_gray);
	}

	body.home {
		margin: 0;
		padding: 0;
	}

	ul.row_gap_none li,
	ol.row_gap_none li {
		margin-bottom: 0;
	}

	div.main_title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
		margin: 1.875rem 0;
        box-sizing: border-box;
        padding-left: 25px;
        min-height: 200px;
        border-radius: 10px;
        background: var(--lightstone) url(/tosho/book_making_knowledge/images/page_title_bg.jpg) 0 50% / 90vw auto no-repeat;
	}

	div.main_title h1 {
        font-size: min(6vw, 1.3125rem);
		line-height: 1.25;
        color: var(--marron);
	}

    div.main_title p {
        font-size: .875rem;
    }

	h2,
    h3 {
		font-weight: 600;
        font-feature-settings: "pkna";
        letter-spacing: .05rem;
	}

	div.main_title small {
		font-size: 50%;
	}

	div.main_footer {
		margin: 0;
		padding: 1.75rem 0;
		border-width: 1px 0;
		border-style: solid;
		border-color: var(--line_gray);
		text-align: center;
	}

    div.main_footer .flexcols {
        column-gap: 0;
    }

    div.main_footer a.button_l {
        padding: 1.5rem 0 1.25rem 0;
        border-style: none;
        background: rgb(12,91,20);
        background: linear-gradient(180deg, rgba(12,91,20,1) 0%, rgba(96,140,101,1) 100%);
        box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .25);
        color: #fff;
    }

    div.main_footer a.button_l:hover {
        text-decoration: none;
    }

    div.main_footer a.button_l * {
		text-align: center;
    }

	div.main_footer h3 {
        font-size: 1.1875rem;
        margin-bottom: .625rem !important;
	}

    div.main_footer .text_brief {
        font-size: .8125rem;
    }

	div.main_footer .primary .button_l {
		margin-bottom: 1.5rem;
	}

	.sticky_parent {
		position: relative;
	}

	.sticky {
		position: sticky;
		z-index: 1;
		top: 1.75rem;
	}

    .inpage_index {
        margin: 0 0 4rem 0;
        padding: 10px;
        background: var(--lightstone);
    }

    .inpage_index ul {
        list-style: none;
        display: flex;
        column-gap: 10px;
        margin: 0;
        padding: 0;
    }

    .inpage_index li {
        flex: 1;
        margin: 0 !important;
        line-height: 1.25;
    }

    .inpage_index a {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        column-gap: .5rem;
        align-items: center;
        box-sizing: border-box;
        height: 100%;
        padding: 1.25rem .625rem;
        background: #fff;
        color: var(--base_text);
    }

    .inpage_index.__vertical {
        margin: 0;
        padding: 10px;
    }

    .inpage_index.__vertical ul {
        display: flex;
        flex-direction: column;
        column-gap: 0;
        row-gap: 10px;
        margin: 0;
        padding: 0;
    }

    .inpage_index.__vertical li {
        flex: 1;
        margin: 0 !important;
        line-height: 1.25;
        font-size: 1rem;
    }

    .inpage_index.__vertical a {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        column-gap: 1rem;
        align-items: center;
        box-sizing: border-box;
        height: 100%;
        padding: 1.25rem 1rem;
        background: #fff;
        color: var(--base_text);
    }

    .inpage_index a:hover {
        text-decoration: none;
    }

    .inpage_index a::before {
        content: "";
        width: 1.25rem;
        min-width: 1.25rem;
        height: 1.25rem;
        background: #fff url(./images/barr_marron.svg) center center / 1.25rem 1.25rem no-repeat;
    }

	section.inpage_anchor_parent {
		position: relative;
		overflow: hidden;
        margin-bottom: 2.5rem;
	}

	span.inpage_anchor {
		position: absolute;
		top: -5rem;
		display: block;
	}

    .back_inpage_index {
        text-align: right;
    }

    .back_inpage_index a {
        display: inline-block;
        border: 1px solid var(--line_gray);
        border-radius: 2rem;
        font-size: 0.875rem;
        line-height: 1.25;
        padding: .25rem 1.5rem .25rem 3rem;
        background: url(/tosho/_str/images/tarr_s.svg) 1.25rem 50% / 13px auto no-repeat;
        color: var(--marron);
    }

    .back_inpage_index a:focus,
    .back_inpage_index a:hover {
        text-decoration: none;
    }

	h2 {
		font-weight: 500;
	}

	h2.catch_phrase {
		font-size: 1.5rem; /* 24pt based 16pt */
	}

	.box {
		margin-bottom: 1.75em;
		padding: 1.5rem;
		background: var(--lightstone);
	}

    .box_elegant {
        background: var(--elegant);
    }

	.sidebar .box {
		padding: 1rem;
	}

	.box > :first-child {
		margin-top: 0;
	}

	.box > :last-child {
		margin-bottom: 0;
	}

	.box.recommendation {
		padding: 1.5rem;
	}

	a.button_l {
		display: block;
		padding: 1rem 0;
		border: 1px solid var(--gray);
		background: var(--vp_yellow);
	}

	a.button_l > h3,
	a.button_l > p {
		margin: 0;
	}

	ul.buttons_v {
		list-style: none;
		margin-top: 0;
		padding: 0;
	}

	ul.buttons_v li {
		line-height: 1.5;
		margin-bottom: .75rem;
	}

	ul.buttons_v li.separate_before {
		padding-top: .75rem;
		border-top: 1px solid var(--line_gray);
	}

	.buttons_v a {
		display: block;
		padding: 1.25rem;
		border: 1px solid var(--line_gray);
		background: var(--vp_yellow);
	}

	ul.buttons_v .banner {
		position: relative;
	}

	ul.buttons_v .banner::before {
		content: "banner";
		display: block;
		padding: .25rem .5rem;
		position: absolute;
		z-index: 2;
		background: var(--gray);
		color: #fff;
		font-size: .875rem;
	}

	ul.buttons_v .banner a {	
		padding: 3.5rem 1.25rem;
	}

	ul.buttons_h {
		list-style: none;
		display: flex;
		column-gap: 1rem;
		padding: 0;
	}

	ul.buttons_h li {
		margin: 0;
		line-height: 1.5;
	}

	ul.buttons_h li.flex_grow_1 {
		flex: 1;
	}

	.buttons_h a {
		display: block;
		padding: 1.25rem;
		border: 1px solid var(--line_gray);
		background: var(--vp_yellow);
	}

	.ico_q {
		padding-left: 3rem !important;
		background-image: url(/demo_images/question.svg) !important;
		background-position: 1rem 50% !important;
		background-size: 1.5rem auto !important;
		background-repeat: no-repeat !important;
	}

	/*----- format -----*/

    .text_box {
    }

	/*----- format_a -----*/
    
    .format_a .main h2.sec_title {
        display: flex;
        align-items: center;
        column-gap: 1em;
		font-size: 1.25rem; /* 20pt based 16pt */
		color: var(--base_text);
        padding-bottom: .5rem;
        border-bottom: 1px solid var(--line_gray);
	}

    .format_a .main h2.sec_title::before {
        content: "";
        width: 3.25rem;
        min-width: 3.25rem;
        height: 3.25rem;
		background: url(./images/h2_ico_book.png) left center /  3.25rem 3.25rem no-repeat;
    }

	.format_a .sidebar h2,
	.format_a .sidebar .h2,
	.format_a .sidebar h3,
	.format_a .sidebar .h3 {
		font-weight: 600;
	}

    .format_a .sidebar h2.telling {
        display: flex;
        align-items: center;
        column-gap: 1em;
        box-sizing: border-box;
        font-feature-settings: "pkna";
    }

    .format_a .sidebar h2.telling::before {
        content: "";
        height: 90px;
        width: 4px;
        min-width: 4px;
        background: var(--base_text);
    }

    #book_making_knowledge #hon-gakko-com {
        width: 100%;
        height: 1800px;
    }

	.format_a .main h3.sec_title {
        padding: .625rem;
        background: var(--iris);
        color: #fff;
	}

	.format_a .main h3.feature {
        padding: .625rem;
        font-size: 1.125rem;
        background: var(--lightstone);
        color: var(--darkgreen);
	}

    .format_a .box_compact {
        margin-right: 1.25rem;
        margin-left: 1.25rem;
        padding: 1.25rem;
    }

	table.std th {
		background: var(--lightstone) !important;
        border: solid 1px var(--line_gray);
        color: var(--darkgreen);
	}

	table.std td {
        border: solid 1px var(--line_gray);
	}

    dl.feature {
        margin-top: 2.5rem;
        display: flex;
        align-items: center;
        column-gap: 28px;
        color: var(--darkgreen);
    }

    .feature dt {
        margin-top: 0;
        flex-basis: 108px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }

    .feature dt::before {
        content: "";
        position: absolute;
        bottom: -0.5rem;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 4px;
        background: var(--yellow);
    }

    .feature dt span.large {
        margin-top: 0;
        line-height: 1;
        font-size: 2.5rem;
        font-style: italic;
    }

    .feature dd {
        flex-basis: 584px;
        font-weight: 600;
    }



	/*==================== mobile モーダル ====================*/

	._modalLayer_ > ._close_ {
		display: block;
		position: absolute;
		z-index: 2;
		right: 1rem;
		top: 1rem;
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		border: 1px solid #fff;
		background: #b5b5b5;
		transform: rotate(45deg);
		cursor: pointer;
	}

	._modalLayer_ > ._close_::before {
		content: "";
		display: block;
		position: absolute;
		z-index: 2;
		top: 50%;
		left: .5rem;
		width: 2rem;
		height: 1px;
		background-color: #fff;
	}
	
	._modalLayer_ > ._close_::after {
		content: "";
		display: block;
		position: absolute;
		z-index: 2;
		top: .5rem;
		left: 50%;
		width: 1px;
		height: 2rem;
		background-color: #fff;
	}


	/*==================== mobile 表組関連 ====================*/

	._x_scroll_area {
		position: relative;
		width: 100%;
		overflow-x: scroll;
	}

	._x_scroll_area th:first-child {
		position: sticky;
		left: 0;
	}

	._x_scroll_area caption {
		text-align: left;
	}


	/*==================== mobile グローバルメニュー ====================*/

	#tosho_ground {
		position: relative;
	}

	#_sticky_sensor_ {
		top: 0;
		width: 1px;
		height: 1px;
		margin-bottom: -1px;
		background: #fff;
	}

	#main_menu_container {
        --menu_height : 3.5rem;
        margin-left: -10px;
        margin-right: -10px;
		position: sticky;
		z-index: 100;
		top: 10px;
        min-height: var(--menu_height);
		box-sizing: border-box;
		padding: 0 4vw;
		overflow: hidden;
        background: rgb(12,91,20);
        background: linear-gradient(180deg, rgba(12,91,20,1) 0%, rgba(96,140,101,1) 100%);
		box-shadow:
			0 2px 4px rgba(0, 0, 0, 0.5),
			0 5px 8px rgba(0, 0, 0, 0.076)
		;
	}

    #main_menu_container #site_name {
        display: none;
    }

	.global_menu_label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 40px;
        position: absolute;
        z-index: 3;
        min-height: var(--menu_height);
        box-sizing: border-box;
        color: #fff;
	}

    .global_menu_label .sign {
        transition: background-color .4s;
        display: block;
        opacity: 1;
        position: absolute;
        top: 1.75rem;
        left: 0;
        width: 24px;
        height: 2px;
         background-color: #fff;
    }

    .global_menu_label .sign::before {
        transition: transform .4s;
        content: "";
        display: block;
        position: absolute;
        top: -8px;
        left: 0;
        width: 24px;
        height: 2px;
         background-color: #fff;
    }

    .global_menu_label .sign::after {
        transition: transform .4s;
        content: "";
        display: block;
        position: absolute;
        top: 8px;
        left: 0;
        width: 24px;
        height: 2px;
         background-color: #fff;
    }

    #main_menu_toggle:checked ~ .global_menu_label .sign {
         background-color: transparent;
    }

    #main_menu_toggle:checked ~ .global_menu_label .sign::before {
        transform: rotate(45deg) scaleX(1.2);
        transform-origin: 5px 5px;
    }

    #main_menu_toggle:checked ~ .global_menu_label .sign::after {
        transform: rotate(-45deg) scaleX(1.2);
        transform-origin: 3px -3.5px;
    }

	#global_menu li {
		margin: 0;
        font-size: 1rem;
	}

	#global_menu a {
        height: var(--menu_height);
		display: flex;
        column-gap: .5rem;
        align-items: center;
		white-space: nowrap;
		border-top: solid 1px var(--darkgreen);
		color: #fff;
	}

    #global_menu li:not(#to_contact) a::before {
        content: "";
        display: block;
        width: 28px;
        height: 28px;
        background: url(./images/ico_book2.svg) center center / 20px 20px no-repeat;
    }

	#global_menu li.current a {
        margin: 0 -5vw;
        padding-right: 5vw;
        padding-left: 5vw;
		background: var(--darkgreen);
	}

	#global_menu li.current a::before {
        background: url(./images/ico_pen.svg) center center / 20px 20px no-repeat !important;
	}

	#global_menu li.current + li a {
        border-top-color: transparent;
    }
    
    #global_menu li#to_contact {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        min-height: var(--menu_height);
        position: absolute;
        z-index: 3;
        right: 5vw;
        top: 0;
        height: auto;
        width: 32vw;
        box-sizing: border-box;
        font-size: 1rem;
    }

    #global_menu li#to_contact::before {
        content: "";
        display: block;
        width: 1px;
        height: calc(var(--menu_height) - 1.875rem);
        background: var(--darkgreen);
    }

    #global_menu li#to_contact a {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: auto;
        padding: 0;
        padding: .5rem 0 .5rem .75rem;
        border-style: none;
        font-feature-settings: "palt";
        letter-spacing: .12em;
    }

    #global_menu li#to_contact a::after {
        content: "";
        display: block;
        width: 28px;
        height: 28px;
        background: url(./images/ico_mail.svg) center center / 28px 28px no-repeat;
    }

	#global_menu {
        z-index: 2;
		list-style: none;
		margin: var(--menu_height) 0 0 0;
        padding: 0;
        height: calc(var(--menu_height) * 8.2);
        transition: height .4s ease-in-out;
	}

	.home #global_menu {
        height: calc(var(--menu_height) * 7.2);
	}

	#main_menu_toggle:not(:checked) ~ #global_menu {
		height: 0px;
	}

    #main_menu_container .service_name {
        display: none;
    }

    #main_menu_container._sticky_ .service_name {
        display: block;
    }

	#front_cover + #main_menu_container {
		top: 1.125rem;
	}

	#main_menu_toggle {
		position: absolute;
		z-index: 2;
		left: -4rem;
	}


	/*==================== mobile 新潮社　図書編集室について ====================*/
    
    #about_us .text_box {
        margin: 0 0 3.75rem 0;
    }

    #about_us .text_box p {
        margin: 0;
        line-height: 2;
        text-indent: 1em;
    }

    #about_us .text_box p.new_sec {
        margin-top: 2em;
    }

    #about_us .text_box p.sign {
        margin-top: 4em;
    }

	/*==================== mobile 新潮社の自費出版について ====================*/

    #page_about .main_title {
        height: 200px;
        background: url(/tosho/about/images/h1_a.jpg) center center / 100vw auto no-repeat;
        text-shadow: 0px 1px 5px var(--gray), 0px 1px 3px #000, 0px 1px 3px #000;
    }

    #page_about .main_title h1 {
        letter-spacing: .08em;
        color: #fff;
    }

	/*==================== mobile 広告宣伝サポートサービス ====================*/

    h3.special_offer {
        font-size: 1rem;
        font-weight: normal;
        line-height: 1.75em;
    }

    .ad_lineup {
    }

    .ad_lineup .grid_item {
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        border: solid 1px var(--base_text);
        display: flex;
        padding: 2rem;
        margin-bottom: 1.25rem;
        flex-direction: column;
        align-items: center;
    }

    .ad_lineup h4 {
        margin-top: 0;
        margin-bottom: .875rem;
        font-size: 1.5rem;
        letter-spacing: .05em;
    }

    .ad_lineup .grid_item::before {
        position: absolute;
        top: 0;
        right: 0;
        transform-origin: 100% 0px;
        z-index: -1;
        transform: translate(100px, 0px) rotate(45deg);
        content: "";
        width: 800px;
        height: 800px;
        background: var(--yellow);
    }

    .ad_lineup p {
        font-size: 1rem;
        margin-top: .875rem;
        margin-bottom: .875rem;
    }

    .ad_lineup img {
        width: auto;
        height: 222px;
		box-shadow:
			0 0px 7px rgba(0, 0, 0, 0.3),
			0 5px 12px rgba(0, 0, 0, 0.52)
		;
    }

	/*==================== mobile ストーリーズ ====================*/
    
	#stories .unit {
        margin-bottom: 50px;
	}

    #stories .lay_colmun {
        display: flex;
        column-gap: 1.25rem;
    }

    #stories .lay_colmun .col:first-child {
        flex-basis: 35%;
    }

    #stories .lay_colmun .col:last-child {
        display: flex;
        flex-direction: column;
        flex-basis: 65%;
    }

    #stories .thumb img {
        width: 100%;
        height: auto;
    }

    #stories .book_title {
        order: 1;
        font-size: min(4.5vw, 1.125rem);
        padding-bottom: .25rem;
        border-bottom: 2px solid var(--base_text);
        margin-bottom: 0;
    }

    #stories .author {
        order: 2;
        font-size: min(4vw, .875rem);
        margin-top: .25rem;
    }

    #stories .tags {
        order: 3;
    }

    #stories .description {
        order: 4;
    }

    #stories .description p {
        font-size: 0.875rem;
    }

    #stories .from_editor {
        order: 5;
        border-top: 1px solid var(--line_gray);
    }

    #stories .from_editor p {
        margin-top: .875rem;
        color: var(--beangreen);
        font-size: 0.875rem;
        font-weight: 600;
    }
	
	#stories .tag {
		list-style: none;
		display: block;
		margin: 0;
		padding: 0;
		font-weight: 300;
	}

	#stories .tag li {
		display: inline-block;
		font-size: .8125rem;
		margin-bottom: 0;
	}

	#stories .genre a,
	#stories .genre span {
		display: inline-block;
		margin: 0 .125rem .25rem 0;
		padding: .25rem 1rem;
		border-radius: 2rem;
		background: var(--elegant);
	}

	#stories .service a,
	#stories .service span {
		display: inline-block;
		margin: 0 .125rem .25rem 0;
		padding: .25rem 1rem;
		border-radius: 2rem;
		background: var(--lightstone);
        font-size: 0.625rem;
	}

	#stories .book_format {
		padding-left: 1.25rem;
	}

	#stories .book_format li {
		margin: 0 0 .25rem 0;
		font-size: .75em;
        line-height: 1.4;
	}

	/*==================== mobile 新潮社の自費出版について > 本作りの専門家 ====================*/

	#professionals {
		margin-top: 4rem;
	}
    
    #professionals .grid_item {
        background: var(--lightstone);
        padding: 20px;
        margin-bottom: 1.25rem;
    }

    #professionals .grid_item h3 {
        margin-top: .5rem;
        text-align: center;
        color: var(--darkgreen)
    }

	#professionals .grid_container {
		
	}


	#professionals .grid_container .inner {
		display: flex;
		flex-direction: column;
		column-gap: 2rem;
		overflow: hidden;
	}

	#professionals .grid_container .primary {
		flex-grow: 1;
		flex-basis: 40%;
	}

	#professionals .grid_container .secondary {
		flex-grow: 1;
		flex-basis: 60%;
	}

	#jihisyuppan th,
	#jihisyuppan td {
		padding: .25rem;
	}

	#jihisyuppan .th1 {
		width: 33%;
	}

	#jihisyuppan .td1 {
		width: 67%;
	}

	#jihisyuppan th[scope="row"] {
		text-align: left;
		font-weight: bold;
	}

    #jihisyuppan table h4 {
        margin: .875rem 0;
        display: flex;
        align-items: center;
        column-gap: .25rem;
        line-height: 1.5;
    }

    #jihisyuppan table h4::before {
        content: "";
        width: 22px;
        height: 12px;
        background: url(./images/rarr_long_green.svg) left center / 22px 12px no-repeat;
    }

    #jihisyuppan table ul:last-child {
        margin-bottom: 0;
    }

    #jihisyuppan table p {
        font-size: .875rem;
        line-height: 1.5;
    }

    #jihisyuppan table li {
        font-size: .875rem;
        line-height: 1.5;
    }

	/*==================== mobile よくあるご質問（FAQ） ====================*/

	#faq ._foldingBlock_ {
		border-style: none;
	}
	
	#faq ._foldingBlock_ > .unit {
		position: relative;
		overflow: hidden;
		border-style: none;
	}

    #faq ._foldingBlock_ > .unit:first-of-type {
        border-radius: unset;
    }
	
	#faq ._foldingBlock_ .toggle_heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        column-gap: .5rem;
        border: 1px solid var(--line_gray);
        border-radius: 1.25rem;
		padding: 1.5rem .625rem 1.5rem .875rem;
        margin-bottom: 2rem;
	}

    #faq ._foldingBlock_ .toggle_heading::after {
        transition: transform .4s;
        content: "";
        display: block;
        width: 40px;
        height: 14px;
        background: url(/tosho/_str/images/ico_block_open.svg) center top / 16px auto no-repeat;
    }

    #faq ._foldingBlock_ .stat:checked ~ .toggle_heading::after {
        transform: rotate(-180deg);
    }

	#faq ._foldingBlock_ .stat:checked ~ .toggle_heading {
        margin-bottom: 0;
		border-color: var(--lightstone);
        background: var(--lightstone);
	}

    #faq ._foldingBlock_ .toggle_container {
        transition-duration: .5s;
    }

	#faq ._foldingBlock_ .stat:checked ~ .toggle_container {
		height: auto;
		opacity: 1;
		visibility: visible;
		padding: 1.5rem 0;
	}

	#faq ._foldingBlock_ .toggle_container .inner {
		display: inline-block;
		padding: 0;
		margin-bottom: 0;
	}

	#faq .question {
        display: flex;
        align-items: center;
		position: relative;
		padding: 0 0 0 3.125rem;
		font-size: 0.9375rem;
	}

	#faq .answer {
		position: relative;
		padding: 0 0 0 4.125rem;
	}

	#faq h2 + .question {
		border-top: none;
	}

	#faq .answer :first-child {
		margin-top: 0;
        padding-top: 1rem;
	}


	#faq .question span.num {
		display: block;
		position: absolute;
		z-index: 2;
		left: 0;
		margin-right: 2.4rem;
		line-height: 2.4rem;
		width: 2.4rem;
		text-align: center;
		content: "Q";
        color: var(--marron);
		font-size: 1.25rem; /* 24pt based 16pt */
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
		font-weight: bold;
	}

	#faq .answer::before {
        opacity: 0;
		display: block;
		position: absolute;
		z-index: 2;
		top: 0;
		left: .25rem;
		line-height: 3rem;
		width: 3rem;
		text-align: center;
		content: "A";
		border: 1px solid var(--marron);
        border-radius: 4rem;
		color: var(--marron);
		font-size: 1.25rem; /* 24pt based 16pt */
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
		font-weight: bold;
	}

    #faq ._foldingBlock_ .stat:checked ~ .toggle_container .answer::before {
        opacity: 1;
    }


	/*==================== mobile 料金のめやす ====================*/
    
    table.price_list th,
	table.price_list td {
		padding-right: .25rem;
		padding-left: .25rem;
	}

	table.price_list {
		font-size: .8125rem; /* 13pt based 16pt */
	}

	table.std thead th,
	table.std thead th[conspan] {
		background: var(--lightstone) !important;
	}

    table.std thead th,
    table.std thead th small {
        font-size: 3vw;
    }

	table.std tbody th,
	table.std tbody th[conspan] {
		background: var(--lightstone) !important;
	}

    #price_list .book_title {
        font-size: 1.3125rem;
        font-weight: normal;
        font-feature-settings: "pkna";
    }

    #price_list .book_title .author_release {
        display: block;
        font-size: 1rem;
    }

    #price_list .the_price {
        text-align: right;
        font-size: 1.5rem;
    }

    #price_list .the_price span {
        display: inline-block;
        border-bottom: 3px solid var(--base_text);
        font-feature-settings: "palt";
    }

    #price_list .the_price small {
        display: inline-block;
        margin-left: .25rem;
        font-size: 1rem;
    }

    #price_list ul.recommendation_point {
        list-style: none;
        padding: 0;
    }

    #price_list ul.recommendation_point li {
        font-size: 1rem;
        font-weight: 600;
    }

    #price_list .service_property {
        list-style: none;
        padding: 0;
    }

    #price_list .service_property li {
        margin-bottom: 5px;
        padding: 1.25rem 1.25rem 1.25rem 3.5rem;
        background: var(--lightstone) url(/tosho/_str/images/ico_check_point.svg) 15px 50% / 24px 22.5px no-repeat;
        line-height: 1.5;
    }



	/*==================== mobile 本作りの流れ ====================*/

    #book_making .main_title {
        padding: 25px;
        height: auto;
        flex-direction: column;
        column-gap: 1rem;
        background-image: none;
    }

    #book_making .main_title .eyecatch {
    }

    .box.optional_service {
        padding: 1.5rem;
    }

    .box.optional_service .box_heading {
        display: flex;
        column-gap: 1.75rem;
        margin-bottom: 1.875rem;
    }

    .box.optional_service .box_heading .service_logo {
        display: none;
    }

    .box.optional_service .box_heading .text {
        flex-grow: 1;
    }

    .box.optional_service h2 {
        line-height: 1.75;
        color: var(--marron);
    }

    .box.optional_service p {
        font-size: .875rem;
    }

    .box.optional_service .box {
        margin-right: -0.75rem;
        margin-left: -0.75rem;
        padding: 1.5rem .875rem;
        background: #fff;
        border: 1px solid var(--teagreen)
    }

    .box.optional_service .box h3 {
        font-size: 1.125rem;
        margin-bottom: 1.25rem;
        color: var(--teagreen);
    }

    .box.optional_service .box h3.__text_brief {
        font-size: .875rem;
        line-height: 1.75;
        font-feature-settings: "palt";
    }

    .box.optional_service .lay_colmun {
        display: flex;
        flex-direction: column;
        row-gap: .625rem;;
        justify-content: space-between;
        align-items: center;
    }

    .box.optional_service .lay_colmun h4 {
        font-size: 1.25rem;
        font-weight: 600;
        border-bottom: 2px solid var(--yellow);
    }

    .box.optional_service a.button_attention {
        min-width: 60vw;
    }
	
	#flow_book_making {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
        margin: .625rem 0 0 0;
	}

    #flow_book_making p {
        font-size: min(3.5vw, 1rem);
    }

	#flow_book_making .grid_item {
		position: relative;
        overflow: visible;
        margin-left: .875rem;
        padding-bottom: 3.125rem;
		grid-column: 1 / 3;
        border-left: 6px solid var(--line_gray);
	}

    #flow_book_making .grid_item:last-child {
        margin-top: -1.5rem;
        border-color: transparent;
    }

    #flow_book_making .grid_item.split,
    #flow_book_making .grid_item.merge {
        position: relative;
        overflow: hidden;
        height: 80px;
        padding-bottom: 0;
    }

    #flow_book_making .grid_item.split::before {
        content: "";
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 140px;
        border-radius: 40px;
        border: 6px solid var(--line_gray);
        margin-left: calc(-50% + .825rem);
    }

    #flow_book_making .grid_item.merge::before {
        content: "";
        bottom: 0;
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 140px;
        border-radius: 40px;
        border: 6px solid var(--line_gray);
        margin-top: -100px;
        margin-left: calc(-50% + .62rem);
    }

	#flow_book_making .grid_item.item_f,
	#flow_book_making .grid_item.item_g {
		grid-column: 1 / 2;
	}

	#flow_book_making .grid_item.item_h {
		grid-column: 2 / 3;
		grid-row: 7 / 9;
		align-self: stretch;
	}

	#flow_book_making .grid_item .inner {
		display: flex;
        flex-direction: column;
	}

	#flow_book_making .grid_item .inner div > *:first-child {
		margin-top: 0;
	}

	#flow_book_making .grid_item .inner div > *:last-child {
		margin-bottom: 0;
	}

	#flow_book_making .primary {
        padding-left: 16px;
		flex-grow: 1;
		flex-basis: 40%;
	}

    #flow_book_making h2 {
        position: relative;
        display: flex;
        align-items: center;
        column-gap: .75rem;
    }

    #flow_book_making h2 .num {
        position: relative;
        z-index: 2;
        margin-left: -2.75rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 3rem;
        min-width: 3rem;
        height: 3rem;
        border: 1px solid var(--marron);
        border-radius: 50%;
        background: #fff;
        color: var(--marron);
        font-size: 2rem;
    }

    #flow_book_making h2 .num.large {
        width: 3.5rem;
        min-width: 3.5rem;
        height: 3.5rem;
        border-width: 4px;
        margin-left: -3.2rem;
        font-size: 2.5rem;
    }

    #flow_book_making h2 .num + span {
        padding: .5rem 0;
        border-bottom: 1px solid var(--marron);
        margin: 0;
    }

    #flow_book_making h2 strong {
        font-size: 1.5rem;
        font-weight: 500;
    }

	#flow_book_making .secondary {
        margin-top: .75rem;
        padding-left: 1.25rem;
		flex-grow: 1;
		flex-basis: 60%;
	}

	#flow_book_making .secondary img {
        width: 244px;
        height: auto;
    }

	#flow_book_making .secondary img.small {
        width: 125px;
        height: auto;
    }

	#flow_book_making .grid_item.item_f .inner,
	#flow_book_making .grid_item.item_g .inner,
	#flow_book_making .grid_item.item_h .inner {
		display: flex;
		flex-direction: column;
		column-gap: 2rem;
	}

	#flow_book_making .grid_item.item_f .primary,
	#flow_book_making .grid_item.item_g .primary,
	#flow_book_making .grid_item.item_h .primary {
		flex-basis: auto;
	}

	#flow_book_making .grid_item.item_f .secondary,
	#flow_book_making .grid_item.item_g .secondary,
	#flow_book_making .grid_item.item_h .secondary {
		flex-basis: auto;
	}

	#flow_book_making .grid_item:not(:last-child)::after {
		content: "";
		display: block;
		position: absolute;
		z-index: 2;
		bottom: -90px;
		width: 100%;
		height: 146px;
		line-height: 1;
		text-align: center;
		background: url(/demo_images/barr.svg) center center / 75px auto no-repeat;
	}

	/*==================== mobile 本作りの基礎知識 ====================*/

    #book_making_knowledge .main_title {
        flex-direction: column;
        position: relative;
        overflow: hidden;
        height: auto;
        margin-bottom: 1.875rem;
        padding: 4.375rem 20px 25px 25px;
        background: var(--lightstone) url(/tosho/book_making_knowledge/images/page_title_bg.jpg) 0 100% / 75vw auto no-repeat;
    }

    #book_making_knowledge .main_title .eyecatch {
        display: none;
    }

    #book_making_knowledge .main_title .text p {
        margin-top: 3.75rem;
        line-height: 2;
        font-size: 0.8125rem;
        font-feature-settings: "pkna";
    }

    #book_making_knowledge .main_title .text *:last-child {
        margin-bottom: 0;
    }

    #book_making_knowledge figcaption {
        font-weight: 600;
        color: var(--darkgreen);
    }

    #book_making_knowledge ul.lay_column {
        list-style: none;
        padding: 0;
    }

    #book_making_knowledge ul.lay_column li {
        overflow: hidden;
        border-top: 1px solid var(--line_gray);
        margin: 1.875rem 0 0 0;
        padding: 1.875rem 0 0 0;
    }

    #book_making_knowledge ul.lay_column h3 {
        margin: 0 0 .875rem 0;
        color: var(--marron);
        font-size: 1.25rem;
        font-weight: normal;
    }

    #book_making_knowledge ul.lay_column li > *:last-child {
        margin-bottom: 0;
    }

	/*==================== desktop 特製革装本 ====================*/

    #luxury_book .main_title {
        padding: 25px 25px 0 25px;
        height: auto;
        flex-direction: column;
        column-gap: 1rem;
        background-image: none;
    }

    #luxury_book .main_title .text {
        position: relative;
    }

    #luxury_book .main_title .eyecatch {
        overflow: hidden;
        margin: 0 -25px 0 -25px;
        border-radius: 0px 0px 10px 10px;
    }

    #luxury_book .main_title .eyecatch img {
        width: 100%;
        height: auto;
    }

    #luxury_book .main_title .text {
        position: relative;
    }

    #luxury_book .main_title .text .adjust {
    }

    #luxury_book .main {
        margin-bottom: 4.375rem;
    }

    #luxury_book .main p,
    #luxury_book .main li {
        font-size: .875rem;
        line-height: 2;
    }

    #luxury_book .item_e {
        padding: 0 10vw;
    }

    #luxury_book .box {
        border: 4px double var(--line_gray);
        background: #fff;
    }

    #luxury_book .box_heading h2 {
        margin: 0 0 .625rem 0;
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--marron);
    }

    #luxury_book .box_heading h3 {
        margin: 0 0 1.5rem 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--marron);
    }

    #luxury_book .box ul.indent_none li {
    }

    #luxury_book .box ul.indent_none li::before {
        content: "◆";
        display: inline-block;
        margin-right: .25rem;
        color: var(--hisui);
    }

    #luxury_book .lay_col {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        align-items: center;
        justify-content: space-around;
        column-gap: 28px;
    }

    #luxury_book .lay_col .thumb {
        width: 102px;
        height: auto;    
    }

	/*==================== mobile ホーム ====================*/

    #tosho_ground {
        display: flex;
        flex-direction: column;
    }

    #tosho_ground > * {
        order: 3;
    }

    #tosho_ground > #front_cover {
        order: 1;
    }

    #tosho_ground > .lead {
        order: 2;
    }

	#front_cover {
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: -40px;
        margin-right: -20px;
        margin-left: -20px;
		height: 410px;
		background: #fff url(/tosho/_str/images/loading.gif) center center / 50px 50px no-repeat;
	}

    #front_cover::before {
        content: "";
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
		background: #fbf8f2 url(./images/home_cv_bg.png) -180px -44px / 965px auto;
    }

	#front_cover .item_a {
        z-index: 2;
	}

	#front_cover .item_b1 {
        position: absolute;
        z-index: 2;
        right: 55%;
        top: 180px;
	}

	#front_cover .item_b2 {
        position: absolute;
        z-index: 2;
        right: 55%;
        top: 40px;
	}

	#front_cover .item_b3 {
        position: absolute;
        z-index: 2;
        left: 55%;
        top: 120px;
	}

	#front_cover .item_b4 {
        position: absolute;
        z-index: 2;
        left: 55%;
        top: 240px;
	}

	#front_cover .item_b5 {
        position: absolute;
        z-index: 2;
        right: 55%;
        top: 300px;
	}

    #front_cover .service_name h1 {
        margin: 0;
        line-height: 1;
        width: 70vw;
        height: auto;
    }

    #front_cover .service_name .below_title {
        margin: 0;
        line-height: 1;
        width: 70vw;
        height: auto;
    }

    #front_cover .service_name img {
        width: 100%;
        vertical-align: bottom;
    }

    #front_cover img.msg {
        position: absolute;
        z-index: 2;
        left: 90px;
        top: -23px;
        width: 80px;
        height: 80px;
        vertical-align: bottom;
    }

    #front_cover img.ph {
        width: 140px;
        height: auto;
        vertical-align: bottom;
    }

	#main_menu_container + .lead {
	}

	#home_view {
		margin-top: 3rem;
		display: flex;
		flex-direction: column;
	}

	#home_view > .grid_item.item_a {
        background: var(--lightstone);
        margin: 0 -20px;
	}
    
    #home_view #new_arrivals_title {
        padding-top: 2.5rem;
        display: flex;
        justify-content: center;
        background: var(--lightstone);
    }

	#home_view h2 {
		padding-bottom: .5rem;
		text-align: center;
	}

	#home_view #new_arrivals_title h2 {
        display: flex;
        flex-direction: column;
        row-gap: .25rem;
        margin-top: 0;
        position: relative;
        font-size: 1.3125rem;
        font-feature-settings: "pkna";
        color: var(--marron);
	}

	#home_view #new_arrivals_title h2 .time {
        display: block;
        line-height: 1;
        margin: 0 3.125rem;
        padding: 10px 20px;
        border-radius: 20px;
        white-space: nowrap;
		font-size: .875rem; /* 14px base on 16px */
        font-weight: 600;
        letter-spacing: normal;
        color: var(--darkgreen);
	}

	#home_view #new_arrivals {
		list-style: none;
		display: flex;
		justify-content: space-between;
		padding: 0;
        column-gap: 1.875rem;
	}

	#home_view #new_arrivals > li {
		margin: 0;
	}

	#home_view #new_arrivals > li:first-child {
		margin-left: 50vw;
	}

	#home_view #new_arrivals > li:last-child {
		margin-right: 50vw;
	}

	#home_view #new_arrivals span.thumb {
		display: block;
		padding-bottom: .625rem; /* 10pt based 16pt */
        text-align: center;
	}

	#home_view #new_arrivals a {
		display: block;
	}

	#home_view #new_arrivals img {
		width: auto;
		height: 240px;
		vertical-align: bottom;
	}

	#home_view #new_arrivals dl {
		margin: 0;
		font-size: .875rem; /* 14pt based 16pt */
	}

	#home_view #new_arrivals dt {
		margin-top: 0;
        font-size: 1rem;
        line-height: 1.5;
	}
    
    /* スナップスライダー */

	#home_view ._snapSliderT_ {
		--screen_height: 26rem;
		--side_margin: 20vw;
		--nav_pos: 70vw;
		margin: 0 var(--side_margin) 6.25rem var(--side_margin);
		position: relative;
		/* border: solid 1px blue; */ /*--- border for debug ---*/
	}

	#home_view ._snapSliderT_ ._dots_ {
		position: absolute;
		z-index: 3;
		bottom: 12px;
		left: 50%;
		display: flex;
		transform: translateX( -50% );
	}

	#home_view ._snapSliderT_ ._dots_ span {
		width: 9px;
		height: 9px;
		margin-left: .625rem;
		background: var(--line_gray);
		border-radius: 50%;
	}

	#home_view ._snapSliderT_ ._dots_ span._current_ {
		background: var(--base_text)
	}

	#home_view ._snapSliderT_ ._dots_ span:first-child {
		margin-left: 0;
	}

	#home_view ._snapSliderT_ nav {
		position: absolute;
		z-index: 2;
		width: 100%;
		/* border: solid 1px green; */ /*--- border for debug ---*/
	}

	#home_view ._snapSliderT_ nav ._prev_,
	#home_view ._snapSliderT_ nav ._next_ {
		display: block;
		overflow: hidden;
		position: absolute;
		z-index: 2;
		top: calc(var(--screen_height) * 1.25 / 8 );
		width: calc(var(--screen_height) / 6);
		height: calc(var(--screen_height) / 4);
		cursor: pointer;
		text-indent: -10em;
		color: transparent;
		/* border: solid 1px pink; */ /*--- border for debug ---*/
	}
	
	#home_view ._snapSliderT_ nav ._prev_ {
		right: var(--nav_pos);
		transform: translateX(50%);
	}

	#home_view ._snapSliderT_ nav ._next_ {
		left: var(--nav_pos);
		transform: translateX(-50%);
	}
	
	#home_view ._snapSliderT_ nav ._prev_::after,
	#home_view ._snapSliderT_ nav ._next_::after {
		content: " ";
		display: block;
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 50%;
		width: 12vw;
		height: 12vw;
		border-radius: 50%;
		background: #fff;
		box-shadow:
			0 7px 5px 0 rgba(0, 0, 0, .4),
			0 5px 3px 0 rgba(0, 0, 0, .2)
		;
	}

	#home_view ._snapSliderT_ nav ._prev_::after {
		transition: transform .2s ease-in-out;
		transform: translate(-50%, -50%) scale(1, 1);
		background: #000 url(./images/slider_larr.svg) center center / 7vw 7vw  no-repeat;
	}

	#home_view ._snapSliderT_ nav ._next_::after {
		transition: transform .2s ease-in-out;
		transform: translate(-50%, -50%) scale(1, 1);
		background: #000 url(./images/slider_rarr.svg) center center / 7vw 7vw no-repeat;
	}

	#home_view ._snapSliderT_ nav ._prev_:active::after,
	#home_view ._snapSliderT_ nav ._next_:active::after {
		transform-origin: 50% 50%;
		transform: translate(-50%, -50%) scale(1.2, 1.2);
	}

	#home_view ._snapSliderT_ ul._screen_ {
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		overflow-x: scroll;
		display: flex;
		flex-direction: row;
		list-style: none;
		margin: 0 calc(-1 * var(--side_margin));
		padding: 0;
		/* スクロールバー非表示 IE, Edge */
		-ms-overflow-style: none;
		/* スクロールバー非表示 Firefox */
		scrollbar-width: none;
		/* border: solid 1px red; */ /*--- border for debug ---*/
	}

	#home_view ._snapSliderT_ ul._screen_::-webkit-scrollbar {
		/* スクロールバー非表示 Chrome, Safari */
		display:none;
	}

	#home_view ._snapSliderT_ li {
		flex: 1 0 50vw;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		margin: 0;
		padding: 0;
		height: 100%;
	}

	#home_view ._snapSliderT_ li:first-child {
		margin-left: calc(2 * var(--side_margin));
	}

	#home_view ._snapSliderT_ li:last-child {
		margin-right: calc(2 * var(--side_margin));
	}

	#home_view ._snapSliderT_ li > a {
		display: contents;
	}

	#home_view ._snapSliderT_ img {
		height: 100%;
		vertical-align: bottom;
		scroll-snap-align: center;
	}

	#home_view ._snapSliderT_ ._dots_ {
		bottom: -3.75rem;
	}

    #home_view > .grid_item.item_b {
        border-bottom: 1px solid var(--line_gray);
        margin-bottom: 1.75rem;
        padding: 2.5rem 0 1.875rem 0;
    }

	#home_view > .grid_item.item_b h2 {
		margin-top: 0;
        font-size: 1.3125rem;
        font-feature-settings: "pkna";
        color: var(--marron);
	}

	#home_view > .grid_item.item_d h3 {
		margin-top: 0;
	}

	#home_view .tag {
		list-style: none;
		padding: 0;
        margin-bottom: 0;
	}

	#home_view .tag li {
		margin-bottom: 1.25rem;
		display: inline-block;
        font-weight: 400;
	}

	#home_view .tag a {
		display: inline-block;
		padding: .625rem .875rem;
		margin-right: .5rem;
		border-radius: 2rem;
		background: var(--elegant);
        color: var(--base_text);
	}

	#home_view .tag a:focus,
    #home_view .tag a:hover,
    #home_view .tag a:active {
		text-decoration: none;
	}

	#home_view .recommendation h3 {
        margin: 0 0 1.75rem 0;
        padding: 1.5rem 0;
        text-align: center;
        font-size: 1.125rem;
        font-weight: 600;
        background: var(--yellow);
        color: var(--base_text);
    }

    #home_view #pickup_contents {
        margin-top: 0;
    }

    #home_view #pickup_contents ul.banners {
        list-style: none;
        margin-top: 0;
        padding: 0;
    }

    #home_view #pickup_contents ul.banners li {
        margin-bottom: .875rem;
    }

    #home_view #pickup_contents a.banner {
        display: block;
        width: 90%;
        box-sizing: border-box;
        margin-left: 5%;
        padding: 4px;
        border: 1px solid var(--darkgreen);
    }

    #home_view #pickup_contents a.banner img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }

    #pickup_contents {
        margin-top: 2.5rem;
    }

    .sidebar ul.banners {
        list-style: none;
        margin-top: 0;
        padding: 0;
    }

    .sidebar ul.banners li {
        margin-bottom: .875rem;
    }

    .sidebar a.banner {
        display: block;
        width: 315px;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding: 4px;
        border: 1px solid var(--darkgreen);
    }

    .sidebar a.banner img {
        width: 100%;
        height: auto;
    }

    a.button_attention {
        display: block;
        box-sizing: border-box;
        padding: .875rem .875rem .875rem 2.5rem;
        border-radius: 4px;
        background: var(--energy) url(./images/rarr_white.svg) .875rem center / 16px 16px no-repeat;
        color: #fff;
        font-size: 1.125rem;
        font-weight: 600;
        text-align: center;
    }

    a.button_attention:focus,
    a.button_attention:hover,
    a.button_attention:active {
        text-decoration: none;
    }
    
    .sidebar a.button_attention {
        margin-right: 1.25rem;
        margin-left: 1.25rem;
        display: block;
        box-sizing: border-box;
        padding: .875rem .875rem .875rem 2.5rem;
        border-radius: 4px;
        background: var(--energy) url(./images/rarr_white.svg) .875rem center / 16px 16px no-repeat;
        color: #fff;
        font-weight: 600;
        font-size: 1.125rem;
        text-align: center;
    }

    .sidebar a.button_attention:focus,
    .sidebar a.button_attention:hover,
    .sidebar a.button_attention:active {
        text-decoration: none;
    }


    /*==================== mobile ホーム アニメーション ====================*/

    @keyframes intro_bg {
        0% {
            opacity: 0;
            background-position: -180px -44px;
        }
        5% {
            opacity: 1.0;
            background-position: -180px -62px;
        }
        20% {
            opacity: 1.0;
            background-position: -180px -116px;
        }
        95% {
            opacity: 1.0;
            background-position: -180px -386px;
        }
        100% {
            opacity: 1.0;
            background-position: -180px -404px;
        }
    }

    #front_cover::before {
        opacity: 0;
    }

    ._doneOpening_ #front_cover {
        opacity: 1;
        background: none;
    }

    ._doneOpening_ #front_cover::before {
        opacity: 1;
        background-position: -180px -404px;
    }

    ._LoadingIsCompleted_ #front_cover::before {
        animation: intro_bg 8.4s linear 0s 1 normal forwards;
    }

    @keyframes intro_msg {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0px);
        }
    }

    @keyframes intro_ph_rl {
        0% {
            opacity: 0;
            transform: translateX(20px);
        }
        100% {
            opacity: 1;
            transform: translateX(0px);
        }
    }

    @keyframes intro_ph_lr {
        0% {
            opacity: 0;
            transform: translateX(-20px);
        }
        100% {
            opacity: 1;
            transform: translateX(0px);
        }
    }

    #front_cover .anime_intro .msg,
    #front_cover .anime_intro .ph {
        opacity: 0;
    }

    ._doneOpening_ #front_cover .anime_intro .msg,
    ._doneOpening_ #front_cover .anime_intro .ph {
        opacity: 0;
    }

    ._LoadingIsCompleted_ #front_cover .anime_intro .msg {
        animation: intro_msg 2.4s ease-out 0s 1 normal forwards;
    }

    ._LoadingIsCompleted_ #front_cover .item_b1 .ph {
        animation: intro_ph_rl 2.4s ease-out 0s 1 normal forwards;
    }
	._LoadingIsCompleted_ #front_cover .item_b1 .msg,
    ._LoadingIsCompleted_ #front_cover .item_b1 .ph {
        animation-delay: 1.5s;
    }

    ._LoadingIsCompleted_ #front_cover .item_b2 .ph {
        animation: intro_ph_lr 2.4s ease-out 0s 1 normal forwards;
    }
	._LoadingIsCompleted_ #front_cover .item_b2 .msg,
    ._LoadingIsCompleted_ #front_cover .item_b2 .ph {
        animation-delay: 5.1s;
    }

    ._LoadingIsCompleted_ #front_cover .item_b3 .ph {
        animation: intro_ph_lr 2.4s ease-out 0s 1 normal forwards;
    }
	._LoadingIsCompleted_ #front_cover .item_b3 .msg,
    ._LoadingIsCompleted_ #front_cover .item_b3 .ph {
        animation-delay: 2.7s;
    }

	._LoadingIsCompleted_ #front_cover .item_b4 .ph {
        animation: intro_ph_lr 2.4s ease-out 0s 1 normal forwards;
    }
    ._LoadingIsCompleted_ #front_cover .item_b4 .msg,
    ._LoadingIsCompleted_ #front_cover .item_b4 .ph {
        animation-delay: 3.9s;
    }

    ._LoadingIsCompleted_ #front_cover .item_b5 .ph {
        animation: intro_ph_lr 2.4s ease-out 0s 1 normal forwards;
    }
	._LoadingIsCompleted_ #front_cover .item_b5 .msg,
    ._LoadingIsCompleted_ #front_cover .item_b5 .ph {
        animation-delay: 6.3s;
    }

    @keyframes disappear {
        0% {
            opacity: 1;
            transform: scale(100%);
        }
        100% {
            opacity: 0;
            transform: scale(105%);
        }
    }

    ._doneOpening_ #front_cover .grid_item:not(.item_a) {
        display: none;
    }

    ._LoadingIsCompleted_ #front_cover .grid_item:not(.item_a) {
        animation: disappear 1.2s ease-out 8.0s 1 normal forwards;
    }

    @keyframes attention_title {
        0% {
            opacity: 0;
            transform: scale(110%);
        }
        100% {
            opacity: 1;
            transform: scale(100%);
        }
    }

    #front_cover .title {
        opacity: 0;
    }

    ._doneOpening_ #front_cover .title {
        opacity: 1;
    }

    ._LoadingIsCompleted_ #front_cover .title {
        animation: attention_title 1.2s ease-out 8.0s 1 normal forwards;
    }

    #front_cover .below_title {
        opacity: 0;
    }

    ._doneOpening_ #front_cover .below_title {
        opacity: 1;
    }

    ._LoadingIsCompleted_ #front_cover .below_title {
        opacity: 0;
        animation: attention_title 1.2s ease-out 8.4s 1 normal forwards;
    }
       

}