@charset "utf-8";
/* CSS Document */

/* =============================================================================
	共通 
============================================================================= */
/* 非順列リスト re-setting　リストマークカラー変更 */
.list-usage-beginner>li:before { background: #3eb370!important; }
/* ボタンの装飾 re-setting　カラー変更 -------------------- { */
.lyt-btn-beginner > .btn-a { color: #000000!important; background: #ffffff; border: 1px solid #3eb370; }
.lyt-btn-beginner > .btn-b { color: #000000!important; background: #3eb370; border: 1px solid #3eb370; }
.lyt-btn-beginner > .btn-b::before, .lyt-btn-beginner > .btn-a::before { display: block; position: absolute; content: ""; top: 50%; right: 12px; width: 8px; height: 8px; border-top: 2px solid #000000; border-right: 2px solid #000000; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -4px; }
.lyt-btn-beginner > .btn-b:hover, .lyt-btn-beginner > .btn-b:active, .lyt-btn-beginner > .btn-b:focus { background: #51D791; border: 1px solid #51D791; }
.lyt-btn-beginner > .btn-a:hover, .lyt-btn-beginner > .btn-a:active, .lyt-btn-beginner > .btn-a:focus {     background: #e4f8ee; }
.lyt-btn-beginner+* { margin-top: 34px; }
.lyt-btn-beginner > .btn-a[href$=".pdf"]::before, .lyt-btn-beginner > .btn-a[target=_blank]::before, .lyt-btn-beginner > .btn-a[formtarget=_blank]::before, .lyt-btn-beginner > .btn-b[href$=".pdf"]::before, .lyt-btn-beginner > .btn-b[target=_blank]::before, .lyt-btn-beginner > .btn-b[formtarget=_blank]::before {
    display: none;
}
/* -------------------- } ボタンの装飾 re-setting　カラー変更 */

/* =============================================================================
	トップページ 
============================================================================= */
/* ビギナーガイドメニュー（contents-list_grid） -------------------- { */
.contents-list_grid { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -0.78125%; margin-right: -0.78125%; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: -3.125%; }
.contents-list_grid > li#basic { -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-box-flex:0; -ms-flex:0 0 98.4375%; flex: 0 0 98.4375%; width: 98.4375%; margin-left:0.78125%; margin-right:0.78125%; margin-bottom:3.125%} /* col1 */
.contents-list_grid > li { -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-box-flex:0; -ms-flex:0 0 31.7708%; flex: 0 0 31.7708%; width: 31.7708%; margin-left:0.78125%; margin-right:0.78125%; margin-bottom:3.125%} /* col3 */
.contents-list_grid a { position: relative; text-decoration: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; height: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; box-shadow: rgba(0,0,0,.16) 0 3px 6px; overflow: hidden; background: #ffffff; border-radius: 8px; padding-bottom: 16px; }
.contents-list_grid #basic a { position: relative; text-decoration: none; box-shadow: rgba(0,0,0,.16) 0 3px 6px; overflow: hidden; background: #ffffff; border-radius: 8px; padding: 0;}
.contents-list_grid #basic a .content-list_grid_item { display: flex; justify-content: space-between;}
.contents-list_grid #basic a .content-list_grid_item_img { flex-basis: 45%; }
.contents-list_grid #basic a .content-list_grid_item .content-list_grid_item_more { margin-bottom: 16px;}
.contents-list_grid a .content-list_grid_item_img { text-align: center; }
.contents-list_grid a .content-list_grid_item_tit { margin: 16px 16px 0; }
.contents-list_grid a .content-list_grid_item_tit h2 {font-size: 2.4rem; }
.contents-list_grid a .content-list_grid_item_cnt { margin: 16px 16px 0; }
.contents-list_grid a .content-list_grid_item_more { margin: 16px 16px 0; text-align: right;}
.contents-list_grid a .content-list_grid_item_moreBtn { position: relative; display: inline-block; color: #333; padding: 10px 20px; background:#d6e9ca; text-decoration: none; outline: none; transition: all .3s; transition-delay: .7s;}
.contents-list_grid a:hover .content-list_grid_item_moreBtn { background:#3eb370; color: #ffffff; }
.contents-list_grid a .content-list_grid_item_moreBtn span { display: block; }
.contents-list_grid a .content-list_grid_item_moreBtn::before,
.contents-list_grid a .content-list_grid_item_moreBtn::after { content:""; position: absolute; width: 0; height: 1px; background: #3eb370; transition: all 0.2s linear; }
.contents-list_grid a .content-list_grid_item_moreBtn span::before,
.contents-list_grid a .content-list_grid_item_moreBtn span::after{ content:""; position: absolute; width:1px; height:0; background: #3eb370; transition: all 0.2s linear; }
.contents-list_grid a:hover .content-list_grid_item_moreBtn::before,
.contents-list_grid a:hover .content-list_grid_item_moreBtn::after { width: 100%; }
.contents-list_grid a:hover .content-list_grid_item_moreBtn span::before,
.contents-list_grid a:hover .content-list_grid_item_moreBtn span::after{ height: 100%; }
.contents-list_grid a .bordercircle::before { right: 0; top: 0; transition-delay: 0.2s; }
.contents-list_grid a .bordercircle::after{ left: 0; bottom: 0; transition-delay: 0.2s; }
.contents-list_grid a .bordercircle span::before { left: 0; top: 0; }
.contents-list_grid a .bordercircle span::after { right: 0; bottom: 0; }
@media screen and (max-width:768px) {
	.contents-list_grid #basic a .content-list_grid_item { display: block; }
	.contents-list_grid > li { -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-box-flex:0; -ms-flex:0 0 98.4375%; flex: 0 0 98.4375%; width: 98.4375%; margin-left:0.78125%; margin-right:0.78125%; margin-bottom:3.125%} /* col1 */
}
/* -------------------- } ビギナーガイドメニュー（contents-list_grid） */

/* =============================================================================
	サブページ
============================================================================= */
/* サブページタイトル（.hdg-beginner-*） -------------------- { */
/*  h1  */
.hdg-beginner-a {font-weight: bold;padding: 0 3em;width: fit-content;margin: 0 auto;text-align: center;position: relative;font-size: clamp(3rem, 2vw + 2rem, 4rem);}
.hdg-beginner-a::before, .hdg-beginner-a::after {content: '';background: #3eb370;width: 2em;height: 3px; position: absolute;top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.hdg-beginner-a::before { left: 0;}
.hdg-beginner-a::after { right: 0;}
/* h2 */
.hdg-beginner-b {font-size: clamp(2.2rem, 2vw + 2rem, 3.2rem); position: relative; padding: 1rem .5rem;margin: 52px 0 26px;}
.main-contents .section-inner> .hdg-beginner-b:first-child {margin-top: 0;}
.hdg-beginner-b:before,
.hdg-beginner-b:after { position: absolute; left: 0;width: 100%; height: 4px; content: ''; background-image: -webkit-gradient(linear, right top, left top, from(#C5E8D4), to(#3eb370)); background-image: -webkit-linear-gradient(right, #C5E8D4 0%, #3eb370 100%); background-image: linear-gradient(to left, #C5E8D4 0%, #3eb370 100%);}
.hdg-beginner-b:before { top: 0; }
.hdg-beginner-b:after { bottom: 0; }
/* h3 */
.hdg-beginner-c { font-size: clamp(2rem, 2vw + 2rem, 2.4rem); position: relative; margin: 38px 0 24px; padding: 8px 8px 8px 48px; background: #C5E8D4; }
.hdg-beginner-c::before,.hdg-beginner-c::after { display: inline-block; position: absolute; transform: translateY(-50%); margin-left: 16px; width: 12px; height: 12px; border: 2px solid #3eb370; content: ''; }
.hdg-beginner-c::before { top: calc(50% - 3px); left: 0; }
.hdg-beginner-c::after { top: calc(50% + 3px); left: 5px; }
/* -------------------- } サブページタイトル（.hdg-beginner-*） */
/* インデックスエリア（beginner-area-index） -------------------- { */
.beginner-area-index { background-color: #ffffff; border: 1px solid #333333; list-style: none; position: relative; margin: 3em 0; }
.beginner-area-index::before { content: "Index"; color: #3eb370; background-color: #ffffff; font-size: 2.0rem; position: absolute; top: -0.9em; left: 1em; padding: 0 .5em; }
.beginner-area-index > ul { display: flex; flex-wrap: wrap;    margin: 24px 16px 12px -22px; }
.beginner-area-index> ul > li { padding-left: 49px; margin-bottom: 12px}
.beginner-area-index> ul > li > a { text-decoration: none;}
.beginner-area-index> ul > li > a:hover { text-decoration: underline;}
.beginner-area-index> ul > li > a >.icon-anchor-arrow { display: inline-block; vertical-align: middle;  color: #3eb370; line-height: 1; position: relative; left: 0px; bottom: 3px; height: 16px; width: 2px; background: currentColor; margin-right: 0.8em; }
.beginner-area-index> ul > li > a >.icon-anchor-arrow::before { content: ''; width: 11px; height: 11px; border: 2px solid #3eb370; border-top: 0; border-right: 0; transform: rotate(-45deg); transform-origin: bottom left; position: absolute; left: 1px; bottom: -1px; box-sizing: border-box; }
/* -------------------- } インデックスエリア（beginner-area-index） */
/* 説明リスト要素 - 主なキーと働き（HowToKey） -------------------- { */
.HowToKey { background: #ffffff; padding: 32px; }
.HowToKey > dt { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; font-size: 1.8rem; font-weight: 700; margin-top: 32px; }
.HowToKey > dt:first-child {margin-top: 0px;} 
.HowToKey > dt .num { background: #3eb370; width: 2.0em; text-align: right; padding: 0 0.5em; margin-right: .5em; border-radius: 3px;}
.HowToKey > dt .num.fn { background: transparent; }
.HowToKey > dt .name.fn { color: #0C0CFF; }
.HowToKey > dd { margin: .5em 0 0 2.8em;}
/* -------------------- } 説明リスト要素 - 主なキーと働き（HowToKey） */
/* 2column枠付き - マウス操作／フラットポイントの操作（operation） -------------------- { */
.operation > .lyt-col-a { align-items: stretch; }
.operation > .lyt-col-a > .col { display: flex; align-items: stretch; }
.operation > .lyt-col-a > .col > .frm-wrapper { width: 100%;}
/* -------------------- } 2column枠付き - マウス操作／フラットポイントの操作（operation） */
/* タイピングリンク枠（for-typing） -------------------- { */
.for-typing { position: relative; margin: 0 auto; padding: 2em calc(2.5em + 9px); border-top: 1px solid #3eb370; border-bottom: 1px solid #3eb370; }
.for-typing::before, .for-typing::after { position: absolute; width: 1px; top: 50%; transform: translateY(-50%); height: calc(100% + 20px); background-color: #3eb370; content: ''; }
.for-typing::before { left: 9px; }
.for-typing::after { right: 9px; }
/* -------------------- } タイピングリンク枠（for-typing） */
/* 入力リンクボタン （inputBtn） --------------------　{ */
.inputBtn { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: -16px; margin-left: -16px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.inputBtn>li { flex: 1; margin-bottom: 16px; padding-left: 16px; }
.inputBtn>li a { position: relative; display: block; padding: 8px 34px 8px 22px; text-align: center; line-height: 1.4; box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: background .2s; font-weight: 700; background: #fff;  border-radius: 20px; text-decoration: none; }
.inputBtn>li a.roma { border: 3px solid #ffba00; }
.inputBtn>li a.roma::before { display: block; position: absolute; content: ""; top: 50%; right: 12px; width: 8px; height: 8px; border-top: 3px solid #ffba00; border-right: 3px solid #ffba00; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -4px; border-color: #ffba00; }
.inputBtn>li a.roma:hover, .inputBtn>li a.roma:active, .inputBtn>li a.roma:focus { background: #feeecc;}
@media only screen and (max-width: 480px) {
	.inputBtn { display: block; }
}
.inputBtn.col4-Btn>li { width: 25%; flex: initial;}
@media only screen and (max-width: 770px) {
	.inputBtn.col4-Btn>li { width: 50%; }
}
@media only screen and (max-width: 480px) {
	.inputBtn.col4-Btn>li { width: 100%; }
}
/* -------------------- } 入力リンクボタン （inputBtn-area） */
/* もっとタイピング （more-typing） --------------------　{ */
.more-typing { position: relative; margin: 3.5em 10px 1.5em; padding: 3.0em 1.5em 1.5em; box-shadow: 0 2px 3px rgb(0 0 0 / 20%); background-color: #feeecc; }
.more-typing span { position: absolute; top: -15px; transform: translateX(-.3em) rotate(-5deg); padding: .5em 2em; border-right: 2px dotted rgb(0 0 0 / 10%); border-left: 2px dotted rgb(0 0 0 / 10%); box-shadow: 0 0 5px rgb(0 0 0 / 20%); background-color: rgb(255 255 255 / 40%); font-weight: 600; }
.more-typing p { margin: 0; }
/* -------------------- } もっとタイピング （more-typing） */
/* 操作手順 （processBlock） --------------------　{ */
/* 2column */
.processBlock .twoClm { display: flex; width: 100%; align-items: stretch; margin-bottom: 1.0em;}
.processBlock .twoClm .itemBlockL {flex-basis: 100%;padding: 9px 9px 0 9px;background-color: #FCFEF8;border: 1px solid #cccccc;}
.processBlock .twoClm .itemBlockR {flex-basis: 100%;padding: 9px 9px 0 9px;background-color: #FCFEF8;border: 1px solid #cccccc;}
.processBlock .twoClm .itemBlock {flex-basis: 46.6%;padding: 9px 9px 0 9px;background-color: #FCFEF8;border: 1px solid #cccccc; margin-bottom: 1.0em;}
.processBlock .icon1 { flex-basis: 15%; display: flex; align-items: center; justify-content: center; flex-grow: 0; }
.processBlock .icon2 { flex-basis: 100%; display: flex; align-items: center; justify-content: center;  flex-grow: 0; margin-bottom: 1.0em;}
	@media only screen and (max-width: 768px) {
		.processBlock .twoClm {display:block;}
		.processBlock .twoClm .icon1 img, .processBlock .icon2 img { display: none;}
		.processBlock .twoClm .icon1, .processBlock .icon2 {height: 60px; margin: 1.0em 0; background: url(/usage/beginners_guide/images/sp-img-arrow_d.png) no-repeat center center;}
		.processBlock .twoClm .icon1.notuse, .processBlock .icon2.notuse { background:none;}
	}
/* 1cullum, 2cullum ,3cullum */
.processBlock .capImg { margin: 0; padding-bottom: 9px; text-align: center; }
.processBlock .capImg img { border: 1px solid #999999; }
.processBlock p.capTxt{ margin-bottom: 0; padding: 0 9px 9px 9px; margin-top: 1.6rem!important; }
.processBlock p.capTxt:last-child{ margin-bottom: 1.6rem; }
/* -------------------- } 操作手順 （processBlock） */