@charset "utf-8";
/*
-------------------------------------
CSS file A-link
FileName:work.css
-------------------------------------
*/

/*エディトリアル*/
.editorial_detail{
	width:100%;
}
@media screen and (max-width: 560px){
.editorial_detail p{
	font-size:0.875rem;
	line-height:1.75;
	margin-top:0;
}
}
@media screen and (min-width: 561px){
.editorial_detail p{
	font-size:0.875rem;
	line-height:1.75;
}
}
@media screen and (max-width: 560px){
ul.editorial_img{
	width:100%;
	max-width:1000px;
	padding:0 15px;
	margin:0 auto 50px;
	box-sizing:border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: column;
    flex-direction: column; 
}
ul.editorial_img li{
	width:100%;
}
ul.editorial_img li img{
	width:100%;
	height:auto;
}
}
@media screen and (min-width:561px) and ( max-width:999px) {
ul.editorial_img{
	width:100%;
	max-width:1000px;
	padding:0;
	margin:20px auto 5px;
	box-sizing:border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
ul.editorial_img li{
	width:49%;
}
ul.editorial_img li img{
	width:100%;
	height:auto;
}
}
@media screen and (min-width: 1000px){
ul.editorial_img{
	width:100%;
	max-width:1000px;
	padding:0;
	margin:30px auto 5px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap : wrap;
	flex-wrap: wrap;
}
ul.editorial_img li{
	width:24%;
}
ul.editorial_img li img{
	max-width:100%;
	height:auto;
}
}
/*エディトリアル写真小*/

@media screen and (max-width: 560px){
.editorial_sub_img_box{
	width:100%;
	margin:0 auto 15px;
	display: -webkit-flex;
	display: flex;	
	flex-direction:column;
	-webkit-flex-wrap : wrap;
	flex-wrap: wrap;
}
.editorial_sub_img_boxinner{
	width:100%;
	padding:0 15px;
	margin:0 auto 25px;
	box-sizing:border-box;
	display: -webkit-flex;
	display: flex;	
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap : wrap;
	flex-wrap: wrap;
}
ul.editorial_sub_img{
	width:100%;
	list-style-type:none;
	display: -webkit-flex;
	display: flex;	
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap : wrap;
	flex-wrap: wrap;
}
ul.editorial_sub_img li{
	width:49%;
}
ul.editorial_sub_img li img{
	width:100%;
	margin-top:2px;
	height:auto;
}
}
@media screen and (min-width:561px) and ( max-width:768px) {
.editorial_sub_img_box{
	width:100%;
	margin:0 auto 15px;
	display: -webkit-flex;
	display: flex;	
	flex-direction:column;
	-webkit-flex-wrap : wrap;
	flex-wrap: wrap;
}
.editorial_sub_img_boxinner{
	width:100%;
	margin:0 auto 25px;
	box-sizing:border-box;
	display: -webkit-flex;
	display: flex;	
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap : wrap;
	flex-wrap: wrap;
}
ul.editorial_sub_img{
	width:100%;
	list-style-type:none;
	display: -webkit-flex;
	display: flex;	
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap : wrap;
	flex-wrap: wrap;
}
ul.editorial_sub_img li{
	width:23.5%;
}
ul.editorial_sub_img li img{
	width:100%;
	margin-top:2px;
	height:auto;
}
}

@media screen and (min-width:769px) and ( max-width:999px) {
.editorial_sub_img_box{
	width:100%;
	margin:0 auto 15px;
	display: -webkit-flex;
	display: flex;	
	flex-direction:column;
	-webkit-flex-wrap : wrap;
	flex-wrap: wrap;
}
.editorial_sub_img_boxinner{
	width:100%;
	display: -webkit-flex;
	display: flex;	
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap : wrap;
	flex-wrap: wrap;
}
ul.editorial_sub_img{
	width:100%;
	list-style-type:none;
	display: -webkit-flex;
	display: flex;	
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap : wrap;
	flex-wrap: wrap;
}
ul.editorial_sub_img li{
	width:23.5%;
}
ul.editorial_sub_img li img{
	width:100%;
	margin-top:2px;
	height:auto;
}
}
@media screen and (min-width: 1000px){
.editorial_sub_img_box{
	width:100%;
	margin:0 auto 25px;
	display: -webkit-flex;
	display: flex;	
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap : wrap;
	flex-wrap: wrap;
}
.editorial_sub_img_boxinner{
	width:49.25%;
	display: -webkit-flex;
	display: flex;	
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap : wrap;
	flex-wrap: wrap;
}
ul.editorial_sub_img{
	width:100%;
	list-style-type:none;
	display: -webkit-flex;
	display: flex;	
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap : wrap;
	flex-wrap: wrap;
}
ul.editorial_sub_img li{
	width:23%;
}
ul.editorial_sub_img li img{
	width:100%;
	margin-top:2px;
	height:auto;
}
}
p.editorial_sub_cap{
	width:100%;
	font-size:12px;
	line-height:1.5;
	color:#999;
}


/*エディトリアルテキスト部分*/
@media screen and (max-width: 767px){
.editorial_list{
	width:100%;
	padding:0 15px;
	box-sizing:border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: column;
    flex-direction: column; 
}
.editorial_list dl{
	width:100%;
	margin-bottom:15px;
}
}
@media screen and (min-width: 768px){
.editorial_list{
	width:100%;
	max-width:1000px;
	padding:0;
	box-sizing:border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.editorial_list dl{
	width:49%;
	margin-bottom:15px;
}
}
.editorial_list dl dt{
	font-size:0.875rem;
	line-height:1.75;
	width:100%;
	font-weight:bold;
	color:#447700;
}
.editorial_list dl dt span{
	color:#777;
	font-weight:normal;
}
.editorial_list dl dd{
	font-size:0.875rem;
	line-height:1.75;
	width:100%;
	margin-bottom:2px;
	color:#777;
}


/*占いコンテンツ制作*/
.fortune_detail{
	width:100%;
}
.fortune_detail p{
	font-size:0.875rem;
	line-height:1.75;
	margin-bottom:5px;
}
dl.fortune_list{
	width:100%;
	box-sizing:border-box;
	padding:15px 18px;
	border:1px #bcea4b solid;
	background:#fff;
}
dl.fortune_list dt{
	font-size:0.875rem;
	line-height:1.75;
	width:100%;
	color:#447700;
	font-weight:bold;
}
dl.fortune_list dd{
	font-size:0.875rem;
	line-height:1.75;
	width:100%;
	color:#777;
	margin-bottom:1em;
}

/*パズル制作*/
.puzzle_detail{
	width:100%;
}
.puzzle_detail p{
	font-size:0.875rem;
	line-height:1.75;
	margin-bottom:5px;
}
h4.puzzle_chart{
	font-size:0.875rem;
	line-height:1.75;
	margin-bottom:5px;
}
@media screen and (max-width: 767px){
.puzzle_chart_img{
	display:none;
}
.puzzle_chart_img_sp{
	width:96%;
	max-width:260px;
	margin:0 auto 15px;
	display:block;
}
dl.puzzle_products {
	line-height : 1.65;
	display:flex;
	margin:0 auto;
	flex-wrap: wrap;
	justify-content: center;
}
dl.puzzle_products dt {
	font-size:0.8125rem;
	width : 5.3em;
	font-weight:bold;
}
dl.puzzle_products dd {
	font-size:0.8125rem;
	padding-right:1em;
}
.puzzle_products dd.dotconnect{
	padding-right:4em;
}
}
@media screen and (min-width: 768px){
.puzzle_chart_img{
	width:94%;
	margin:15px auto;
	display:block;
}
.puzzle_chart_img_sp{
	display:none;
}

dl.puzzle_products {
	line-height : 1.65;
	display:flex;
	margin:0 auto;
	flex-wrap: wrap;
	justify-content: flex-start;
}
dl.puzzle_products dt {
	font-size:0.8125rem;
	width : 5.3em;
	font-weight:bold;
}
dl.puzzle_products dd {
	font-size:0.8125rem;
	padding-right:1em;
}
}
.puzzle_chart_img img{
	width:100%;
	height:auto;
}
.puzzle_chart_img_sp img{
	width:100%;
	height:auto;
}

/*webサイト制作*/
@media screen and (max-width: 767px){
.website_detail{
	width:100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.website_img{
	width:100%;
	margin-top:10px;
}
.website_img img{
	width:100%;
	height:auto;
}
.website_txt p{
	width:100%;
	font-size:0.875rem;
	line-height:1.75;
}
}
@media screen and (min-width: 768px){
.website_detail{
	width:100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
     -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.website_img{
	width:46%;
	margin-top:10px;
}
.website_img img{
	max-width:100%;
	height:auto;
}
.website_txt{
	width:50%;
	margin-top:10px;
}
}
.website_detail p{
	font-size:0.875rem;
	line-height:1.75;
	width:100%;
	margin-bottom:5px;
}
.website_txt h4{
	font-size:0.875rem;
	line-height:1.75;
	font-weight:normal;
}
.website_txt p{
	font-size:0.875rem;
	line-height:1.75;
	font-weight:normal;
}

/*スマホアプリ制作*/

.app_detail{
	width:100%;
}
.app_detail p{
	font-size:0.875rem;
	line-height:1.75;
	margin-bottom:0.25em;
}
.app_guide_btn{
	display:inline-block;
}
.btn_detail {
	font-size:0.75rem;
}

@media screen and (max-width: 560px){
ul.app_timeline{
	width:100%;
	margin:0 auto;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column;
    flex-direction: column;
}
ul.app_timeline li{
	width:100%;
	padding:0 0 0 15px;
	box-sizing:border-box;
	margin:1em auto;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
}

@media screen and (min-width:561px) and ( max-width:999px) {
ul.app_timeline{
	width:100%;
	margin:0 auto;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
ul.app_timeline li{
	width:50%;
	padding:0 0 0 15px;
	box-sizing:border-box;
	margin:1em auto;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
ul.app_timeline li.past{
	width:100%;
	padding:0 0 0 15px;
	box-sizing:border-box;
	margin:1em auto;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
}
@media screen and (min-width: 1000px){
ul.app_timeline{
	width:100%;
	margin:1.5em auto 1em;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
ul.app_timeline li{
	width:32%;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
}
.app_timeline_img{
	width:25%;	
}
.app_timeline_img img{
	max-width:100%;
	height:auto;
}
.app_timeline_txt{
	width:70%;	
}
.app_timeline_txt p{
	font-size:0.8125rem;
	line-height:1.75;
}
.app_timeline_txt dl{
	width:100%;
}
.app_timeline_txt dl dt{
	font-size:0.875rem;
	line-height:1.75;
	font-weight:bold;
}
.app_timeline_txt dl dd{
	font-size:0.8125rem;
	line-height:1.75;
}
dl.app_spec {
	line-height : 1.75;
	margin-bottom:5px;
}
dl.app_spec dt {
	font-size:0.8125rem;
	width : 6.1em;
	color:#447700;
}
dl.app_spec dd {
	font-size:0.8125rem;
	margin-left : 6.1em;
	margin-top : -1.75em;
}
dl.app_spec dd.longword {
	font-size:0.8125rem;
	margin-left : 0;
	margin-top : 0;
}

dl.pastapp{
	width:100%;		
}
dl.pastapp dt{
	width:100%;
	font-size:0.8125rem;
	line-height:1.75;	
}
dl.pastapp dd{
	width:100%;
	font-size:0.8125rem;
	line-height:1.75;
	margin-bottom:5px;
}

/*コミック制作*/
.comic_detail{
	width:100%;
}
@media screen and (max-width: 560px){
.comic_detail p{
	font-size:0.875rem;
	line-height:1.75;
	margin-top:0;
}
}
@media screen and (min-width: 561px){
.comic_detail p{
	font-size:0.875rem;
	line-height:1.75;
}
}
@media screen and (max-width: 560px){
ul.comic_list{
	width:100%;
	margin:1.5em auto 1em;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
}
ul.comic_list li{
	width:100%;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.comic_img{
	width:100%;
	text-align:center;
}
.comic_book_img{
	width:100%;
	height:auto;
	text-align:center;
}
.comic_img img{
	max-width:100%;
	height:auto;
}
.comic_book_img img{
	max-width:130px;
	height:auto;
	margin:0 auto;
}
.comic_txt{
	width:100%;
	padding:0 15px;
	box-sizing:border-box;
}
}

@media screen and (min-width:561px) and (max-width:767px) {
ul.comic_list{
	width:100%;
	margin:1.5em auto 1em;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
ul.comic_list li{
	width:49%;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.comic_img{
	width:100%;
	text-align:center;
}
.comic_book_img{
	width:100%;
	height:auto;
	text-align:center;
}
.comic_img img{
	max-width:100%;
	height:auto;
}
.comic_book_img img{
	width:100%;
	max-width:130px;
	height:auto;
	margin:0 auto;
}
.comic_txt{
	width:100%;
	padding:0 15px;
	box-sizing:border-box;
}
}

@media screen and (min-width: 768px){
ul.comic_list{
	width:100%;
	margin:1.5em auto 1em;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
ul.comic_list li{
	width:49%;
	display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.comic_img{
	width:46%;
	text-align:center;
	margin-right:2%;
}
.comic_book_img{
	width:32%;
	text-align:center;
	margin-right:5%;
}
.comic_img img{
	width:100%;
	height:auto;
}
.comic_book_img img{
	width:100%;
	max-width:130px;
	height:auto;
	margin:0 auto;
}
.comic_txt{
	width:50%;
}
}
.comic_txt h4{
	font-size:0.875rem;
	line-height:1.75;
	font-weight:normal;
}
.comic_txt p{
	font-size:0.875rem;
	line-height:1.75;
	font-weight:normal;
}


/*グラフィック制作*/
@media screen and (max-width: 767px){
.graphic_detail{
	width:100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.graphic_detail p{
	font-size:0.875rem;
	line-height:1.75;
	width:100%;
	margin-bottom:5px;
}
.graphic_img{
	width:100%;
	margin-top:10px;
}
.graphic_img img{
	width:100%;
	height:auto;
}
.graphic_txt{
	width:100%;
}
}
@media screen and (min-width: 768px){
.graphic_detail{
	width:100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.graphic_detail p{
	font-size:0.875rem;
	line-height:1.75;
	width:100%;
	margin-bottom:5px;
}
.graphic_img{
	width:46%;
	margin-top:10px;
}
.graphic_img img{
	width:100%;
	height:auto;
}
.graphic_txt{
	width:50%;
	margin-top:10px;
}
}
.graphic_txt h4{
	font-size:0.875rem;
	line-height:1.75;
	font-weight:normal;
}
.graphic_txt p{
	font-size:0.875rem;
	line-height:1.75;
	font-weight:normal;
}

/*キャプションボタン枠*/

.guide_works_box{
	width:100%;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	margin:10px 0;
}
.guide_works_txt{
	display:inline-block;
	font-size:0.875rem;
}
.guide_works_btn{
	display:inline-block;
}